Are useReducer, useMemo, and useCallback commonly used in React?


I’ve been learning React for a month. I just theoretically know those functions but never use them. In most tutorials(Such as Netflix,Spotify or another social app clone), I didn’t see these functions either. Are they used in more complex projects, or only on rare occasions? 

>Solution :

useMemo: This is used when you dont want your component to re-render just because its parent component gets re-rendered.
The practical example could be a heavy component which is placed inside a component that changes frequently (due to API response, or similar).

ON every re-render of parent, the child (unnecessarily) also re-renders ,even though the props to the child never changed during parent re-render. (On child re-render, any hooks inside them will also be re-triggered )

useCallback: This works similar to useMemo, but used over complex calculations/ functions

useReducer has its utilities when you have large number of local-state to be maintained and hence you end up create a series of useState to manage the states. Its better to extract all those states under a reducer and let the reducer manage your component local state.

More details can be seen here in this answer Practical use cases.

Hope it helps!

Leave a Reply Cancel reply