blog4.md

blog4.md

function useFunctionHook(fn, countInParent) {
  // now the fnCallback will only not change across rerender
  const fnCallback = React.useCallback(fn, [countInParent])
  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, countInParent);
return (
    <div>
      some child component inside.
    </div>
  );
}