React’s useMemo Hook can be used to optimize the computation costs of your React function components. We will go through an example component to illustrate the problem first, and then solve it with React’s useMemo Hook.
Keep in mind that most of the performance optimizations in React are premature. React is fast by default, so every performance optimization is opt-in in case something starts to feel slow.
Note: Don’t mistake React’s useMemo Hook with React’s memo API. While useMemo is used to memoize values, React memo is used to wrap React components to prevent re-renderings.
Note: Don’t mistake React’s useMemo Hook with React’s useCallback Hook. While useMemo is used to memoize values, useCallback is used to memoize functions.
Let’s take the following example of a React application which renders a list of users and allows us to filter the users by their name. The catch: The filter happens only when a user explicitly clicks a button; not already when the user types into the input field:
Even though the
filteredUsers don't change when someone types into the input field, because they change only when clicking the button via the
search state, the filter's callback function runs again and again for every keystroke in the input field:
This doesn’t slow down this small React application. However, if we would deal with a large set of data in this array and run the filter’s callback function for every keystroke, we would maybe slow down the application. Therefore, you can use React’s useMemo Hook to memoize a functions return value(s) and to run a function only if its dependencies (here
search) have changed:
Now, this function is only executed once the
search state changes. It doesn't run if the
text state changes, because that's not a dependency for this filter function and thus not a dependency in the dependency array for the useMemo hook.