useMemo, useCallback, and useRef are React hooks designed to enhance performance and state management within functional components. useMemo optimizes by caching the result of expensive computations, useCallback memoizes functions to prevent unnecessary re-renders, and useRef creates a mutable reference persisting across renders, commonly used for accessing DOM elements or storing non-reactive values.
These hooks collectively optimize rendering efficiency and state handling in React, and are crucial topics to articulate fluently in interview settings, showcasing a deep understanding of React's optimization strategies.
useMemo (cache a function value across renders)
useMemo lets you cache the result of a calculation between re-renders(state updates/props change)
Suppose we have a heavy operation running on every render , we may consider memoizing it for an unrelated render
Suppose you have a button on a page, which toggles to light/dark mode , another input box which is hooked to a useState and calculates any heavy computation for ex the nth prime using the input's value onchange() causing a render each time.
Both button press and input on change cause re-calculation of the heavy function - which is not optimal
The button's render which toggles light/dark mode is unrelated to heavy function's calculations and need not recalculate the function again and again
To solve this we can simply put this heavy function inside useMemo and relevant state variables in its dependency arrays
Now although both button change and input change cause re-render , the button click does not run the heavy operation as there is no change in the variables in useMemos dependency array
We have successfully decoupled the heavy operation from unrelated rendering
- For example , in above code instead of calling slowFunction(number) directly, we call it inside useMemo's callback function and cached value will be reused until 'number' remains unchanged
Another application of useMemo hook is comparing referential equality in objects again to avoid unnecessary re-rendering
- In the above example
themeStyleswil cause a re-render each time , as a new object with new reference is created on every render, to avoid this we can again return this object from useMemo , instead of directly declaring it .because what we really want to compare is its value and not its refrence
useCallback(cache a function definition across renders)
Lets you cache a function definition between re-renders
Due to referential inequality when function definitions are passed in as props, it may happen that new function definitions get created with every render, since these new functions have different references , react registers them as a props change
Earlier with useMemo function result was to be cached , but here render is caused because a new function definition is created with each re-render, triggering another re-render,so function definition must be cached to be reused for unrelated renders
useMemo takes in a callback function and give you back the return value , whereas useCallback takes in a callback and returns you the function itself
useRef (reference anything across renders)
A ref persists between renders of your component and is unaffected by renders
When you want some value in your component that should not change on re-render or when you don't want a value to be reset because of a render- useRef can be used
Unlike useState this variable can be directly mutated ie ref.current= refcurrent+1
Mutating this variable does not cause a re-render
The biggest use case that people are going to use Refs for is to reference elements inside JSX
Another use case of useRef is to store previous values of our state
Thank you for reading .
END.