# REACT_STABLE_CONTEXT_PROVIDER_VALUE

When non-stable values (i.e. object identities) are used as the `value` prop for `Context.Provider`,
React will trigger cascading updates to all components that use this context value on each
render, causing needless re-renders (affecting application performance) or causing
unintended consequences that may negatively affect the user-experience.

## Examples

Examples of incorrect code for this rule:

```jsx
return <SomeContext.Provider value={{ foo: 'bar' }}>...</SomeContext.Provider>;
```

Examples of correct code for this rule:

```jsx
const foo = useMemo(() => ({ foo: 'bar' }), []);

return <SomeContext.Provider value={foo}>...</SomeContext.Provider>;
```

## How to fix

One way to fix this issue may be to wrap the value in a `useMemo()`. If the value is a function
then `useCallback()` can be used as well. See the above examples for a reference on how you might
fix this by wrapping with `useMemo`.


--------------------------------------------------------------------------------
title: "REQUIRE_CARET_DEPENDENCIES"
description: "Prevent the use of dependencies without a caret ("
last_updated: "2026-02-03T02:58:39.585Z"
source: "https://vercel.com/docs/conformance/rules/REQUIRE_CARET_DEPENDENCIES"
--------------------------------------------------------------------------------