checklist performance improvements

This commit is contained in:
f0x 2023-01-30 23:46:20 +01:00
parent 204a4c02d1
commit 4367960fe4
3 changed files with 120 additions and 65 deletions

View file

@ -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>
);
}
});

View file

@ -22,26 +22,12 @@ const React = require("react");
const syncpipe = require("syncpipe");
const { createSlice } = require("@reduxjs/toolkit");
const { reducer, actions } = createSlice({
const slice = createSlice({
name: "checklist",
initialState: {},
reducers: {
create: (state, { payload }) => {
const { entries, uniqueKey, defaultValue } = payload;
return syncpipe(entries, [
(_) => _.map((entry) => {
let key = entry[uniqueKey];
return [
key,
{
...entry,
key,
checked: state[key]?.checked ?? entry.checked ?? defaultValue
}
];
}),
(_) => Object.fromEntries(_)
]);
return createState(payload, state);
},
updateAll: (state, { payload: value }) => {
return syncpipe(state, [
@ -62,26 +48,40 @@ const { reducer, actions } = createSlice({
}
});
const { reducer: reducer2, actions } = slice;
function reducer() {
console.log("REDUCING", ...arguments);
return reducer2(...arguments);
}
function createState({ entries, uniqueKey, defaultValue }, oldState) {
console.log("creating state", oldState);
return syncpipe(entries, [
(_) => _.map((entry) => {
let key = entry[uniqueKey];
return [
key,
{
...entry,
key,
checked: oldState?.[key]?.checked ?? entry.checked ?? defaultValue
}
];
}),
(_) => Object.fromEntries(_)
]);
}
module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "key", defaultValue = false }) {
const [state, dispatch] = React.useReducer(reducer, {});
const [state, dispatch] = React.useReducer(reducer, null, () => createState({ entries, uniqueKey, defaultValue }));
const [someSelected, setSomeSelected] = React.useState(false);
const [toggleAllState, setToggleAllState] = React.useState(0);
const toggleAllRef = React.useRef(null);
React.useEffect(() => {
/*
entries changed, update state,
re-using old state if available for key
*/
dispatch(actions.create({ entries, uniqueKey, defaultValue }));
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [entries]);
console.log(state);
React.useEffect(() => {
performance.mark("GoToSocial-useCheckListInput-useEffect-start");
/* Updates (un)check all checkbox, based on shortcode checkboxes
Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
*/
@ -108,8 +108,20 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
setToggleAllState(all ? 1 : 0);
toggleAllRef.current.indeterminate = false;
}
performance.mark("GoToSocial-useCheckListInput-useEffect-finish");
performance.measure("GoToSocial-useCheckListInput-useEffect-processed", "GoToSocial-useCheckListInput-useEffect-start", "GoToSocial-useCheckListInput-useEffect-finish");
}, [state, toggleAllRef]);
const reset = React.useCallback(
() => dispatch(actions.updateAll(defaultValue)),
[defaultValue]
);
const onChange = React.useCallback(
(key, value) => dispatch(actions.update({ key, value })),
[]
);
return React.useMemo(() => {
function toggleAll(e) {
let selectAll = e.target.checked;
@ -122,14 +134,6 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
setToggleAllState(selectAll);
}
function reset() {
dispatch(actions.updateAll(defaultValue));
}
function onChange(key, value) {
dispatch(actions.update({ key, value }));
}
function selectedValues() {
return syncpipe(state, [
(_) => Object.values(_),
@ -154,5 +158,5 @@ module.exports = function useCheckListInput({ name }, { entries, uniqueKey = "ke
onChange: toggleAll
}
});
}, [defaultValue, name, someSelected, state, toggleAllState]);
}, [name, onChange, reset, someSelected, state, toggleAllState]);
};

View file

@ -20,14 +20,41 @@
const React = require("react");
module.exports = function useTextInput({ name, Name }, { validator, defaultValue = "", dontReset = false } = {}) {
module.exports = function useTextInput({ name, Name }, {
defaultValue = "",
dontReset = false,
validator,
initValidation: _initValidation
} = {}) {
const [text, setText] = React.useState(defaultValue);
const [valid, setValid] = React.useState(true);
const textRef = React.useRef(null);
const initValidation = React.useRef(_initValidation); // memoize forever
const [validation, setValidation] = React.useState(_initValidation ?? "");
const [_isValidating, startValidation] = React.useTransition();
const valid = validation == "";
const isFirstUpdate = React.useRef(true);
function onChange(e) {
let input = e.target.value;
setText(input);
if (validator) {
startValidation(() => {
let validatorMsg = (isFirstUpdate.current && initValidation.current)
? initValidation.current
: validator(input);
if (isFirstUpdate.current) {
isFirstUpdate.current = false;
return; // No need to update anything
}
setValidation(validatorMsg);
});
}
}
function reset() {
@ -38,11 +65,9 @@ module.exports = function useTextInput({ name, Name }, { validator, defaultValue
React.useEffect(() => {
if (validator && textRef.current) {
let res = validator(text);
setValid(res == "");
textRef.current.setCustomValidity(res);
textRef.current.setCustomValidity(validation);
}
}, [text, textRef, validator]);
}, [validation, validator]);
// Array / Object hybrid, for easier access in different contexts
return Object.assign([