checklist performance improvements

web/source/settings/components/check-list.jsx

@@ -20,31 +20,57 @@
 
 const React = require("react");
 
-module.exports = function CheckList({ field, Component, header = " All", ...componentProps }) {
+module.exports = function CheckList({ field, header = "All", renderEntry }) {
+	performance.mark("RENDER_CHECKLIST");
 	return (
 		<div className="checkbox-list list">
-			<label className="header entry">
-				<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}
+				renderEntry={renderEntry}
+			/>
 		</div>
 	);
 };
 
-function CheckListEntry({ entry, onChange, Component, componentProps }) {
+function CheckListHeader({ toggleAll, children }) {
+	return (
+		<label className="header entry">
+			<input
+				ref={toggleAll.ref}
+				type="checkbox"
+				onChange={toggleAll.onChange}
+				checked={toggleAll.value === 1}
+			/> {children}
+		</label>
+	);
+}
+
+const CheckListEntries = React.memo(function CheckListEntries({ entries, renderEntry, updateValue }) {
+	const deferredEntries = React.useDeferredValue(entries);
+
+	return Object.values(deferredEntries).map((entry) => (
+		<CheckListEntry
+			key={entry.key}
+			entry={entry}
+			updateValue={updateValue}
+			renderEntry={renderEntry}
+		/>
+	));
+});
+
+/*
+	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, renderEntry }) {
+	const onChange = React.useCallback(
+		(value) => updateValue(entry.key, value),
+		[updateValue, entry.key]
+	);
+
 	return (
 		<label className="entry">
 			<input
@@ -52,7 +78,7 @@ function CheckListEntry({ entry, onChange, Component, componentProps }) {
 				onChange={(e) => onChange({ checked: e.target.checked })}
 				checked={entry.checked}
 			/>
-			<Component entry={entry} onChange={onChange} {...componentProps} />
+			{renderEntry(entry, onChange)}
 		</label>
 	);
-}
+});