Function reference changes on re-render

blog1.md

function useFunctionHook(fn) {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    // some logic
    // if fn changes the hooks callback will run
  }, [count, setCount, fn]);
  return [setCount, fn];
}
// Moved the fn out , now fn will have the same reference across re-render
function fn() {
    // some logic
}

function App() {
  const [countInParent, setCountInParent] = React.useState(0);

  const [setCount] = useFunctionHook(fn);
return (
    <div>
      some child component inside.
    </div>
  );
}