React Study
React Memoization Examples
Regular vs Memoized Components
Check the code out here
Type in the input below to see the difference in re-rendering behavior. The regular counter will re-render on every input change, while the memoized one won't.
Regular (non-memoized callback)
Count: 0
Render Count: 0
Regular (memoized callback)
Count: 0
Render Count: 0
Memoized with React.memo (non-memoized callback)
Count: 0
Render Count: 0
Memoized with React.memo (memoized callback)
Count: 0
Render Count: 0
Memoized with useMemo
Count: 0
Render Count: 0
Input Value: