Function inside functional component in React hooks – Performance

by

Don’t worry about it

Don’t worry about creating new functions on each render. Only in edge cases does that impede your performance.
Setting onClick handlers are not one of those, so just create a new function on each render.

However, when you need to make sure you use the same function every time, you can use useCallback

Why not use useCallback for onClick

Here is a reason why you shouldn’t bother with useCallback for onClick handlers (and most other event handlers).

Consider the following code snippets, one without useCallback:

function Comp(props) {
  return <button onClick={() => console.log("clicked", props.foo)}>Text</Button>
}

and one with useCallback:

function Comp(props) {
  const onClick = useCallback(() => {
    console.log("clicked", props.foo)
  }, [props.foo])

  return <button onClick={onClick}>Text</Button>
}

The only difference in the latter is that React doen’s have
to change the onClick on your button if props.foo remains the same.
Changing the callback is a very cheap operation, and it’s not at all
worth complicating your code for the theoretical performance improvement it gives.

Also, it’s worth noting that a new function is still created on every render
even when you use useCallback, but useCallback will return the old one
as long as the dependencies passed as the second argument are unchanged.

Why ever use useCallback

The point of using useCallback is that if you compare two functions with reference
equality, fn === fn2 is true only if fn and fn2 point to the same function in memory.
It doesn’t matter if the functions do the same.

Thus, if you have memoisation or otherwise only run code when the function changes,
it can be useful to use useCallback to use the same function again.

As an example, React hooks compare old and new dependencies, probably using Object.is.

Another example is React.PureComponent, which will only re-render when props or state have changed. This can be useful for components that use a lot of resources to render. Passing e.g. a new onClick to a PureComponent on each render will cause it to re-render every time.

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. State not updating when using React state hook within setInterval
  3. Make React useEffect hook not run on initial render
  4. Push method in React Hooks (useState)?
  5. How can I use React hooks in React classic `class` component?
  6. How to call loading function with React useEffect only once
  7. How to use componentWillMount() in React Hooks?
  8. Is it possible to share states between components using the useState() hook in React?
  9. Why is useState not triggering re-render?
  10. Updating and merging state object using React useState() hook
  11. componentDidMount equivalent on a React function/Hooks component?
  12. react useEffect comparing objects
  13. How to register event with useEffect hooks?
  14. React useState hook event handler using initial state
  15. Is there a generic way to set state in React Hooks? How to manage multiple states?
  16. How do I update states `onChange` in an array of object in React Hooks
  17. React Function Components with hooks vs Class Components
  18. React Hooks – What’s happening under the hood?
  19. useEffect does not listen for localStorage
  20. setTimeout for this.state vs useState
  21. How does JavaScript mechanism behind react hooks work?
  22. What is useState() in React?
  23. Why need useRef and not mutable variable?
  24. Next.js context provider wrapping App component with page specific layout component giving undefined data
  25. Determine which dependency array variable caused useEffect hook to fire
  26. Updating state to the same state directly in the component body
  27. Proper way of using React hooks + WebSockets
  28. React hook useEffect runs continuously forever/infinite loop
  29. Equivalent to componentDidUpdate using React hooks
  30. Why would we use useEffect without a dependency array?

Leave a Comment