Learn useMemo in 12 Minutes - React Hooks Explained
In this tutorial we're going to do an in-depth dive of the useMemo hook in React. We'll go over what the idea of "memoization" is in the context of React, how useMemo utilizes that concept, and how to use useMemo in your React program.
The purpose of useMemo is to 'memoize' some return value of a function. What this means is we store the result of this function in memory, so that we don't have to re-calculate again UNLESS we have to. This is especially important for expensive calculations, meaning functions that may cause your program to lag because they are computationally heavy.
In React, this is important because of how React does re-rendering. A React component re-renders if its state or props change, meaning if we have an expensive function in our component, then every time we update any state at all we may have lag on our page because of this expensive function getting redefined. That's where useMemo comes in!
After this guide, you'll know how to use UseMemo in your React projects!
Timestamps:
0:00 - What is useMemo?
1:22 - First use case
3:23 - The problem
4:07 - The solution (useMemo)
6:46 - Second use case
8:48 - memo
Hashtags:
#reactjs #webdevelopment #reacttutorial