I've seen a lot of descriptions of why you shouldn't use React's useCallback
with an empty dependency list (which makes logical sense), but I'm stuck trying to figure out if there are performance gains when using it alongside redux-toolkit, when the dependency list includes RT objects. (The application is already performant enough with one user that there's no perceptible difference, so I'm looking to do the "right thing" in the aggregate.)
An example:
export const HomeSettings = () => {
// redux-toolkit
const { data, error, isLoading } = useGetUserQuery();
const [updateUser] = useUpdateUserMutation();
//useCallback providing an actual optimization here?
const changeDataFilterOption = useCallback(
(option: string) => {
const someObj = someFunc(option, data);
updateUser(someObj);
},
[data, updateUser]
);
//useMemo optimizing anything here?
const itemList = useMemo(() => getListOfThings(data), [data]);
if (isLoading) {
return <LoadingMessage />;
}
if (error) {
return <ErrorLoadingDataMessage />;
}
return (
<div onClick={changeDataFilterOption}>
onClick is silly here, just illustrating the point
<div>{itemList}</div>
</div>
);
}
Using redux-toolkit in this way, is there any benefit to memo-izing my callbacks and variables?