Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
useCallback approach for functions
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>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment