What does useCallback/useMemo do in React?

by

This is best used when you want to prevent unnecessary re-renders for better performance.

Compare these two ways of passing callbacks to child components taken from React Docs:

1. Arrow Function in Render

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <Button onClick={() => this.handleClick()}>Click Me</Button>;
  }
}

2. Bind in Constructor (ES2015)

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <Button onClick={this.handleClick}>Click Me</Button>;
  }
}

Assuming <Button> is implemented as a PureComponent, the first way will cause <Button> to re-render every time <Foo> re-renders because a new function is created in every render() call. In the second way, the handleClick method is only created once in <Foo>‘s constructor and reused across renders.

If we translate both approaches to functional components using hooks, these are the equivalents (sort of):

1. Arrow Function in Render -> Un-memoized callback

function Foo() {
  const handleClick = () => {
    console.log('Click happened');
  }
  return <Button onClick={handleClick}>Click Me</Button>;
}

2. Bind in Constructor (ES2015) -> Memoized callbacks

function Foo() {
  const memoizedHandleClick = useCallback(
    () => console.log('Click happened'), [],
  ); // Tells React to memoize regardless of arguments.
  return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}

The first way creates callbacks on every call of the functional component but in the second way, React memoizes the callback function for you and the callback is not created multiple times.

Hence in the first case if Button is implemented using React.memo it will always re render (unless you have some custom comparison function) because the onClick prop is different each time, in the second case, it won’t.

In most cases, it’s fine to do the first way. As the React docs state:

Is it OK to use arrow functions in render methods? Generally speaking,
yes, it is OK, and it is often the easiest way to pass parameters to
callback functions.

If you do have performance issues, by all means, optimize!

More Related Contents:

  1. How can I use multiple refs for an array of elements with hooks?
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. React hooks – right way to clear timeouts and intervals
  5. React Hooks useState() with Object
  6. Can I set state inside a useEffect hook
  7. How to call an async function inside a UseEffect() in React?
  8. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  9. Where can I make API call with hooks in react?
  10. Multiple calls to state updater from useState in component causes multiple re-renders
  11. What’s the difference between `useRef` and `createRef`?
  12. How can I force a component to re-render with hooks in React?
  13. React hooks: accessing up-to-date state from within a callback
  14. Executing async code on update of state with react-hooks
  15. Why React Hook useState uses const and not let
  16. How to change the value of a Context with useContext?
  17. How to prevent re-rendering of components that have not changed?
  18. How target DOM with react useRef in map
  19. How to programmatically clear/reset React-Select?
  20. React Hooks Error: Hooks can only be called inside the body of a function component
  21. React hooks useState setValue still rerender one more time when value is equal
  22. Why can’t React Hooks be called inside loops or nested function?
  23. How to set initial state for useState Hook in jest and enzyme?
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. React Hook “useEffect” is called conditionally
  26. TypeError dispatcher.useState is not a function when using React Hooks
  27. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment