2 files changed, 59 insertions, 26 deletions

diff --git a/web/source/settings/components/check-list.jsx b/web/source/settings/components/check-list.jsx
index 1276d5dbf..569cd7470 100644
--- a/web/source/settings/components/check-list.jsx
+++ b/web/source/settings/components/check-list.jsx
@@ -20,39 +20,71 @@
 
 const React = require("react");
 
-module.exports = function CheckList({ field, Component, header = " All", ...componentProps }) {
+module.exports = function CheckList({ field, header = "All", EntryComponent, getExtraProps }) {
 	return (
 		<div className="checkbox-list list">
-			<label className="header">
-				<input
-					ref={field.toggleAll.ref}
-					type="checkbox"
-					onChange={field.toggleAll.onChange}
-					checked={field.toggleAll.value === 1}
-				/> {header}
-			</label>
-			{Object.values(field.value).map((entry) => (
-				<CheckListEntry
-					key={entry.key}
-					onChange={(value) => field.onChange(entry.key, value)}
-					entry={entry}
-					Component={Component}
-					componentProps={componentProps}
-				/>
-			))}
+			<CheckListHeader toggleAll={field.toggleAll}>	{header}</CheckListHeader>
+			<CheckListEntries
+				entries={field.value}
+				updateValue={field.onChange}
+				EntryComponent={EntryComponent}
+				getExtraProps={getExtraProps}
+			/>
 		</div>
 	);
 };
 
-function CheckListEntry({ entry, onChange, Component, componentProps }) {
+function CheckListHeader({ toggleAll, children }) {
 	return (
-		<label className="entry">
+		<label className="header entry">
 			<input
+				ref={toggleAll.ref}
 				type="checkbox"
-				onChange={(e) => onChange({ checked: e.target.checked })}
-				checked={entry.checked}
-			/>
-			<Component entry={entry} onChange={onChange} {...componentProps} />
+				onChange={toggleAll.onChange}
+			/> {children}
 		</label>
 	);
-}
\ No newline at end of file
+}
+
+const CheckListEntries = React.memo(
+	function CheckListEntries({ entries, updateValue, EntryComponent, getExtraProps }) {
+		const deferredEntries = React.useDeferredValue(entries);
+
+		return Object.values(deferredEntries).map((entry) => (
+			<CheckListEntry
+				key={entry.key}
+				entry={entry}
+				updateValue={updateValue}
+				EntryComponent={EntryComponent}
+				getExtraProps={getExtraProps}
+			/>
+		));
+	}
+);
+
+/*
+	React.memo is a performance optimization that only re-renders a CheckListEntry
+	when it's props actually change, instead of every time anything
+	in the list (CheckListEntries) updates
+*/
+const CheckListEntry = React.memo(
+	function CheckListEntry({ entry, updateValue, getExtraProps, EntryComponent }) {
+		const onChange = React.useCallback(
+			(value) => updateValue(entry.key, value),
+			[updateValue, entry.key]
+		);
+
+		const extraProps = React.useMemo(() => getExtraProps?.(entry), [getExtraProps, entry]);
+
+		return (
+			<label className="entry">
+				<input
+					type="checkbox"
+					onChange={(e) => onChange({ checked: e.target.checked })}
+					checked={entry.checked}
+				/>
+				<EntryComponent entry={entry} onChange={onChange} extraProps={extraProps} />
+			</label>
+		);
+	}
+);
\ No newline at end of file
diff --git a/web/source/settings/components/form/inputs.jsx b/web/source/settings/components/form/inputs.jsx
index eef375ee8..19386b6f2 100644
--- a/web/source/settings/components/form/inputs.jsx
+++ b/web/source/settings/components/form/inputs.jsx
@@ -22,9 +22,10 @@ const React = require("react");
 
 function TextInput({ label, field, ...inputProps }) {
 	const { onChange, value, ref } = field;
+	console.log(field.name, field.valid, field.value);
 
 	return (
-		<div className="form-field text">
+		<div className={`form-field text${field.valid ? "" : " invalid"}`}>
 			<label>
 				{label}
 				<input