Introduction: ReactJS is a popular JavaScript library for building user interfaces.We will be discussing three important performance optimization techniques in ReactJS : useMemo, React.memo and useCallback. These techniques help to improve the performance of ReactJS applications by avoiding unnecessary re-renders and improving the overall efficiency of the application.
- useMemo: useMemo is a React Hook that lets you optimize the performance of your components by memorizing the results of expensive computations. It's used to cache the output of a function so that it's not recalculated on every render.
Here's an example to explain the concept of useMemo in React:
Imagine you're a teacher grading a test. You have a list of students and their answers to the test. Grading a test is time-consuming and you want to avoid repeating it.
This is where useMemo comes in. You can use it to memorize the grades so that they're not recalculated if the answers remain the same.
Here's an example code to understand this concept better:
In this example, the grades are only calculated if the students array changes. The useMemo hook caches the result of the grading process, so it's not repeated on every render if the students array remains the same.
2. React.memo: React.memo is a higher-order component (HOC) that works similarly to useMemo. It memoizes a component, avoiding unnecessary re-renders. React.memo is used when we want to memoize a component, instead of a single value.
Let's understand with a simple example
Imagine you have a teacher who is grading your test papers. Now, let's say you scored 90 on the first test and 95 on the second test. Now, you go to your teacher and ask her to check if you have passed or failed.
Without React.memo, the teacher will check both your test papers every time you go to her, even if your scores haven't changed.
With React.memo, the teacher will keep a memo of your scores and will only check the papers if the scores have changed. So, if you go to the teacher after scoring 95 and ask her again, she'll just look at her memo and tell you that you still have a passing score, without actually checking the papers again.
This is how React.memo works, it memoizes the component and only re-renders it when the input data has changed.
In this example, we have a functional component TestScore that takes a score prop and displays the score and the result (pass or fail). By wrapping this component with React.memo, we're telling React to only re-render the component if the score prop changes, otherwise it will just reuse the previous rendered output.
In this way, we can avoid unnecessary renderings and improve the performance of our application.
3. useCallback : useCallback is a React Hook that memoizes a callback function. It returns a memoized version of the callback that only changes if one of its dependencies has changed.
In simpler terms, it helps to keep a function's value the same between re-renders unless one of its dependencies has changed. So, it only re-creates the callback function if its dependencies have changed, which improves the performance of the component.
Here's an example that demonstrates the use of useCallback.
Let's suppose you have a React component that displays a list of cats. Each cat has a name and an age. The component also has a button that, when clicked, sorts the cats by age in ascending order.
In this example, the sortCats function is wrapped in a useCallback hook, which returns a memoized version of the function that only re-creates when the component re-renders. This means that sortCats will always have the same reference, even if the component re-renders multiple times.
The sortCats function sorts the cats by age when the button is clicked. The sorting logic is defined inside the function, and it sorts the cats using the JavaScript sort method. The sortCats function also uses the setCats state updater to update the state with the sorted cats.
By using useCallback, we make sure that sortCats is not re-created every time the component re-renders. This can greatly improve the performance of the component, especially in situations where the component re-renders frequently.
Conclusion:
useMemo, React.memo and useCallback are powerful performance optimization techniques in ReactJS. They allow us to memoize values, components and callback functions, avoiding unnecessary re-renders and improving the overall efficiency of our applications
I hope this blog post has helped you understand :)