Skip to content

Instantly share code, notes, and snippets.

@simbathesailor
Last active Dec 25, 2019
Embed
What would you like to do?
Function reference changes on re-render
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>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment