Providing values like an object to a React Context will provoke additional re-renders as React doesn’t know the object is the same. This can significantly impact performance since the whole component tree will be re-rendered each time. Wrapping the value in a useMemo hook will avoid additional render passes.

Noncompliant Code Example

function Component() {
  return (
    <SomeContext.Provider value={{foo: 'bar'}}> { /* value is an object expression */ }
      <SomeComponent />
    </SomeContext.Provider>
  );
}

Compliant Solution

function Component() {
  const foo = useMemo(() => ({foo: 'bar'}), []);
  return (
    <SomeContext.Provider value={foo}>
      <SomeComponent />
    </SomeContext.Provider>
  );
}

See

• Context Caveats - React documentation