is useMemo required to manage state via the context API in reactjs?

by

There is a very simple theory to why you should use useMemo to memoize the values passed to the Context Provider. When you pass the value to Context Provider, either as an object or an array like:

return <CountContext.Provider value={{state, setCount}} {...props} />

or

return <CountContext.Provider value={[state, setCount]} {...props} />

What essentially happens is that every time the CountProvider component re-renders a new reference to object or array is being passed as value to CountContext.Provider and hence even if the actual value may not have changed, the Context consumers are re-rendered since the reference check fails for the value.

Now you may or may not need a useMemo depending on what logic you have in your ContextProvider. For instance, in your case the CountContext is just using one state i.e count and passes it on to the child and if the CountContext is one of the top level element which is not re-rendered by anything other than the count change then in that case whether you use useMemo or not makes no difference since the reference of the returned value from useMemo is also updated on count change

However if you have certain parents to CountProvider which can cause CountProvider to re-render, useMemo to memoize context value comes in handy to avoid re-rendering of all the context consumers

Related Contents:

  1. Updating an object with setState in React
  2. How to compare oldValues and newValues on React Hooks useEffect?
  3. How to use `setState` callback on react hooks
  4. React.Component vs React.PureComponent [closed]
  5. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  6. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  7. Set types on useState React Hook with TypeScript
  8. Infinite loop in useEffect
  9. react hooks useEffect() cleanup for only componentWillUnmount?
  10. In useEffect, what’s the difference between providing no dependency array and an empty one?
  11. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  12. What typescript type do I use with useRef() hook when setting current manually?
  13. React useReducer async data fetch
  14. React setState not Updating Immediately
  15. React Hook : Send data from child to parent component
  16. React hooks useEffect only on update?
  17. Reset to Initial State with React Hooks
  18. When to use useCallback, useMemo and useEffect?
  19. How to test a react component that is dependent on useContext hook?
  20. React Hooks: Why is .current null for useRef Hook?
  21. is it possible to React.useState(() => {}) in React?
  22. React-hooks. Can’t perform a React state update on an unmounted component
  23. What is the expected return of `useEffect` used for?
  24. How do I window removeEventListener using React useEffect
  25. Correct way to type nullable state when using React’s useState hook
  26. Testing React Functional Component with Hooks using Jest
  27. “Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”
  28. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  29. React hooks useState Array
  30. How to use React useRef hook with typescript?
  31. Set state when testing functional component with useState() hook
  32. How to focus something on next render with React Hooks
  33. React createContext issue in Typescript?
  34. react-hooks: skip first run in useEffect [duplicate]
  35. What’s the difference between `useCallback` with an empty array as inputs and `useCallback` without a second parameter?
  36. React TypeScript 16.8 How to make useEffect() async
  37. Could not resolve dependency error peer react@”^16.8.0 || ^17.0.0″ from @material-ui/core@4.12.4
  38. useSelector destructuring vs multiple calls
  39. When do I choose React state Vs Redux Store
  40. useNavigate() may be used only in the context of a component
  41. Why React useState with functional update form is needed?
  42. What does it mean to ‘move this variable directly inside useEffect’ in this error message?
  43. React – useState not setting initial value
  44. How to fix the “Warning: useLayoutEffect does nothing on the server”?
  45. How to remove query param with react hooks?
  46. React Hook useEffect has a missing dependency: ‘dispatch’
  47. useReducer Action dispatched twice
  48. React hooks in react library giving Invalid hook call error
  49. How do react hooks determine the component that they are for?
  50. useRef “refers to a value, but is being used as a type here.”

Leave a Comment