Improving performance😎 In React applications includes preventing unnecessary renders and reducing the time a render takes to propagate. useCallback() can help us prevent some unnecessary renders and therefore gain a performance boost💥.

The React useCallback hook can help you improve the performance of your React apps. It is weird that useCallback hook is one of the hooks that are not discussed as often.

In this blog post, we’ll dig deeper into one specific hook — useCallback — because it touches on a fundamental part of functional programming known as memoization.

Ready? Let’s dive in!😉

The useCallback() hook🪝

Going back to React, when a component re-renders, every function inside of the component is recreated and therefore these functions’ references change between renders.

useCallback(callback, dependencies) will return a memoized instance of the callback that only changes if one of the dependencies has changed.

This means that instead of recreating the function object on every re-render, we can use the same function object between renders🤠.

In a react application every function inside a component is regenerated when it is re-rendered, so the references to these functions vary between renders.

What is memorization...?🤔

Memoization in React is a technique for storing computational results and reusing them.

Memoization is when a complex function stores its output so the next time it is called with the same input. It’s similar to caching, but on a more local level. It can skip any complex computations and return the output faster than it’s already calculated.

This can have a significant effect on memory allocation and performance, and that strain is what the useCallback hook is meant to alleviate😲.

The primary and only purpose of the useCallback hook is to prevent needless re-renders in your code, which will speed up and improve the performance of your application.

Syntax of useCallback🧐

The array of dependencies and a function are both passed as parameters to the useCallback hook. The callback will only be modified by the useCallback hook if one of the dependencies has changed. It will return a memoized version of the callback.

// Import useCallback hook from React:
import { useCallback } from 'react'

export default function App() {
  // Use useCallback to memoize function:
  const memoizedFunc = useCallback(() => {
    someFunction() // Function that will be memoized.
  }, [/* depOne, depTwo, ...dep */]) // <= Dependency array.


  return (
    <div className="App">
      {/* Your component */}
    </div>
  )
}

  // A bit shorter version:
  const memoizedFunc = useCallback(() => someFunction(), [])

• The ☝️first argument of useCallback specifies the function to be memorized.

• The ✌️second argument specifies the dependent values ​​in the form of an array. The function generated by useCallback will be redisplayed only when the value specified in the second argument is changed.

• If you specify an empty array ([]) as the second argument, the function will be defined only when the component is rendered for the first time.

• Also, if you do not specify the second argument, it will be redisplayed every time.

summary❤️‍🩹

• Using useCallback avoids unnecessary function rendering and optimizes performance.
• Pass the target function as the first argument.
• Pass dependent variables in an array format to the second argument.

Conclusion🙆‍♀️

useCallback(callback, dependencies) can be used like useMemo(), but it memoizes functions instead of values, to prevent recreation upon every render. allowing you to avoid unnecessary re-rendering which makes your application more efficient💁‍♀️.

When thinking about performance upgrades, always measure (or profile) your component speed before the optimization process. Optimization increases complexity, and as a developer, you should always make sure that the tradeoff is worthwhile.

Thank you for reading to the end🤗.