function useFunctionHook(fn) {
// now the fnCallback will only not change across rerender
const fnCallback = React.useCallback(fn, [])
const [count, setCount] = React.useState(0);
React.useEffect(() => {
// some logic
// if fnCallback changes the hooks callback will run
}, [count, setCount, fnCallback]);
return [setCount, fnCallback];
}
function App() {
const [countInParent, setCountInParent] = React.useState(0);
function fn() {
// some logic
}
const [setCount] = useFunctionHook(fn);
return (
<div>
some child component inside.
</div>
);
}
useCallback approach for functions
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment