• 03 Jul 2022
• Comments (0)
• 2254 reads

Tutorial: Introduction to React useCallback

The rapid development of user interfaces is made possible with the help of React, a front-end JavaScript toolkit that is both open-source and available for no cost. The React community is responsible for its upkeep, and a significant number of its developers are self-taught.

You may be one of them attempting to determine if it would be better for you to utilize React useCallback! Let’s find out.

useCallback optimizes an application by returning a memoized function. Some components keep re-rendering in an application reducing its performance. UseCallback helps in identifying the functions that take up a lot of memory.

The useCallback hook stops functions from running on each render. If the dependencies of the function change then the useCallback function renders it again. The main purpose of using this function is to reduce the memory usage of an application. When the child components are not re-rendered the application runs faster and offer the same results with improved efficiency.

What is useCallback?

The official documentation for React states that useCallback functions are used to return a memoized callback. To put it another way, what it does is return a cached version of a function. The primary reason for using this hook is that it improves performance by freeing up memory.

const memoizedCallback = useCallback(
    () => {
       doSomething(a, b); 
},[a, b], );

When can useCallback be used?

When you have a component in which the child is rendering several times when it is not necessary to do so, you may make use of the useCallback hook.

When you send a callback that is executed inline, as well as an array containing the dependencies, useCallback will return a memoized version of the callback, which will only undergo modification if one of the callback's dependents has been modified.

It is particularly useful when passing callbacks to optimized child components, which depend on reference equality to avoid rendering redundant content.

What is the main purpose of the useCallback hook?

The memoization of functions is the primary objective of the React useCallback hook. The primary motivation for this is to improve the overall performance of the React apps you use. When your component is re-rendered, the functions that are defined inside it are also re-created automatically at the same moment.

When a function is memoized using the useCallback hook, the function is essentially saved in the cache. Quick example: Suppose something restarts the rendering process for your component, there is a transition from one state to another.

In most cases, a re-render will also trigger React's default behavior, which is to re-create all of the functions that are defined inside your component.

Using useCallback hook and memoization might prevent this from happening. When a function is memoized in React, it is possible that React will not re-create the function even if the component is re-rendered.

Instead of creating a new instance, React may just return the function that was previously memoized. Your application's performance may also increase as a result of this, in addition to saving you time and resources.

Example of implementing useCallback

const [height, setHeight] = useState(100);
const [age, setAge] = useState(3);
const handleSetHeight = () => setHeight(height + 10); 
const handleSetAge = () => setAge(age + 1);

We take care of handling state changes by declaring two functions and setting up two useState hooks. This appears to be the norm. The problem is that whenever we call a function and re-rendering takes place, a new instance of both of these functions will be produced.

Even if we just apply one of these functions, an instance of the other one will still be generated. Imagine what would happen if there were more functions and how many instances would need to be generated for each re-render. It is unnecessary and results in performance problems.

useCallback contributes to the resolution of this problem. The function that we supply to it will be cached and memoized by it. As an example, let's rewrite the functions mentioned above as follows:

const handleSetHeight = useCallback(() => setHeight(height + 10), [height]);
const handleSetAge = useCallback(() => setAge(age + 1), [age]);

The drawback of React useCallback

This hook has the potential to assist you by boosting performance. However, it also has some potential drawbacks. Before using useCallback, here are some things you should think about:

Garbage collection

The remaining functions that are not already memoized will be discarded by React as part of its garbage collection process to make more memory available.

Memory allocation

Memory allocation is analogous to garbage collection in that the more memoization you use in your routines, the greater the amount of memory that will be necessary.

Additionally, each time you utilize these callbacks, there is a load of logic inside of React that has to consume even more memory to supply you with the cached result. This may be a significant performance hit.

Complexity

As soon as you begin enclosing functions in these hooks, you will see an instant rise in the overall complexity of your code. It is now necessary to have a deeper comprehension of the rationale behind the use of these hooks and verification that their application is appropriate.

If you are aware of the potential limitations described above, you may avoid the aggravation of finding them on your own. If you are thinking about using useCallback, you should be sure that the performance advantages will exceed the potential drawbacks.

Take Away

It is important to keep in mind that useCallback has very particular use cases and that you should not wrap every method with these hooks.

Use the useCallback method if the function is computationally intensive, if it depends on another hook, or if it receives a prop that is sent to a memoized component. These are all solid clues that you should probably use useCallback.

We hope that you were able to obtain a better understanding of the advanced capabilities of one of React’s most popular hooks as well as greater self-assurance when it comes to functional programming by understating its limitations.

Author

Michael Andersen

Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.