Skip to content

Add caveat to React.createContext docs #1112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions content/docs/context.md
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,8 @@ One issue with the render prop API is that refs don't automatically get passed t

## Caveats

### Value reference equality

Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider's parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for `value`:

`embed:context/reference-caveats-problem.js`
Expand All @@ -236,6 +238,10 @@ To get around this, lift the value into the parent's state:

`embed:context/reference-caveats-solution.js`

### Multiple instances in `node_modules`

Context Providers and Consumers must come from the exact same `React.createContext` call. If a package imports Provider or Consumer components and are then consumed from other packages, it is possible that multiple instances of the Provider/Consumer components will exist in the `node_modules` tree and they will fail to communicate as expected. To mitigate this, these other packages should specify peer dependency (rather than regular depenency) on the package that exports the context Provider or Consumer components so the package manager will ensure a single instance exists in the `node_modules` tree.

## Legacy API

> Note
Expand Down