What's the difference:
1st example:
const onClose = useCallback(onModalClose, []);
2nd example:
const onClose = useCallback(() => onModalClose, []);
onModalClose call as component prop:
<CustomComponent
onModalClose={() => setDeleteModal(false)}
/>
When using a 2nd example, linter would yell on me, because deps array is empty, onModalClose should be in a deps array, that causing issues with multiple re-renders. Using a 1st example causes no issues with re-renders and doesn't require a deps array.
Presuming you mean const onClose = useCallback(() => onModalClose(), []); in your second example, the only significant difference is the second is wrapped in an inline function.
useCallback takes a function to memoize, that is its signature. Without knowing anything about the function onModalClose the linter has nothing to complain about in the first example since you're directly memoizing the function as a callback. In the second you are declaring an anonymous function that calls another function. It is this function call the linter sees and suggests adding it to the dependency array.
Depending on where onModalClose is defined you may be able to safely add it to the dependency array (i.e. if it is defined outside the functional component then its reference is stable and won't change between renders), or you can leave the dependency array empty and may need to add // eslint-disable-next-line react-hooks/exhaustive-deps to the line above it so the linter stops "yelling at you".
const onClose = useCallback(onModalClose, []);
or
const onClose = useCallback(
() => onModalClose(),
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
Between the two I'd prefer the first as it's perfectly clear you're memoizing the function callback and requires less text (i.e. no need to provide an eslint override.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments