Which technique helps prevent unnecessary re-renders when providing context values?

Which technique helps prevent unnecessary re-renders when providing context values?

• A. Wrap the Context.Provider in a memoized component
• B. Pass a stable object reference without memoization
• C. Memoize the context value with useMemo, avoid recreating objects on every render
• D. Dispatch updates through a global store

Answer: (C)

When a Context Provider updates its value, all consuming components re-render. If you create a new object for that value on every render, the reference changes each time, even if the contents are the same, which triggers unnecessary re-renders. memoizing the context value with useMemo fixes this by keeping the same object reference across renders until one of the actual dependencies changes. By computing the provider’s value inside useMemo (for example, const value = useMemo(() => ({ user, theme }), [user, theme])) and passing that memoized value to the Provider, you ensure consumers re-render only when the data they rely on actually changes. Wrapping the Provider in a memoized component can help in some cases, but it doesn’t guarantee stability of the value itself. Relying on a stable object reference without memoization isn’t reliable because the object is typically recreated every render. Using a global store is another approach, but it addresses a broader architecture concern rather than the specific way Context re-renders are triggered.

When a Context Provider updates its value, all consuming components re-render. If you create a new object for that value on every render, the reference changes each time, even if the contents are the same, which triggers unnecessary re-renders.

memoizing the context value with useMemo fixes this by keeping the same object reference across renders until one of the actual dependencies changes. By computing the provider’s value inside useMemo (for example, const value = useMemo(() => ({ user, theme }), [user, theme])) and passing that memoized value to the Provider, you ensure consumers re-render only when the data they rely on actually changes.

Wrapping the Provider in a memoized component can help in some cases, but it doesn’t guarantee stability of the value itself. Relying on a stable object reference without memoization isn’t reliable because the object is typically recreated every render. Using a global store is another approach, but it addresses a broader architecture concern rather than the specific way Context re-renders are triggered.