Browse Source

Memo: Document behavior with useContext (#2332)

* Memo: Document behavior with useContext

It is not obvious that useContext and Memo work well together. Namely, if a child component listens to a context and updates out from under them memo'd function, does the memo'd component have the right state if re-rendered?

yes, actually. but this is undocumented. Now it's not!

* fix typo tigger -> trigger

* Add more detail to all relevant pages

Co-authored-by: Alex Krolick <alexkrolick@users.noreply.github.com>
Co-authored-by: Sophie Alpert <git@sophiebits.com>
main
jarstelfox 5 years ago
committed by Sophie Alpert
parent
commit
f90d199a61
  1. 2
      content/docs/context.md
  2. 2
      content/docs/hooks-reference.md
  3. 2
      content/docs/reference-react.md

2
content/docs/context.md

@ -130,7 +130,7 @@ Every Context object comes with a Provider React component that allows consuming
Accepts a `value` prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.
All consumers that are descendants of a Provider will re-render whenever the Provider's `value` prop changes. The propagation from Provider to its descendant consumers is not subject to the `shouldComponentUpdate` method, so the consumer is updated even when an ancestor component bails out of the update.
All consumers that are descendants of a Provider will re-render whenever the Provider's `value` prop changes. The propagation from Provider to its descendant consumers (including [`.contextType`](#classcontexttype) and [`useContext`](/docs/hooks-reference.html#usecontext)) is not subject to the `shouldComponentUpdate` method, so the consumer is updated even when an ancestor component skips an update.
Changes are determined by comparing the new and old values using the same algorithm as [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).

2
content/docs/hooks-reference.md

@ -180,7 +180,7 @@ const value = useContext(MyContext);
Accepts a context object (the value returned from `React.createContext`) and returns the current context value for that context. The current context value is determined by the `value` prop of the nearest `<MyContext.Provider>` above the calling component in the tree.
When the nearest `<MyContext.Provider>` above the component updates, this Hook will trigger a rerender with the latest context `value` passed to that `MyContext` provider.
When the nearest `<MyContext.Provider>` above the component updates, this Hook will trigger a rerender with the latest context `value` passed to that `MyContext` provider. Even if an ancestor uses [`React.memo`](/docs/react-api.html#reactmemo) or [`shouldComponentUpdate`](/docs/react-component.html#shouldcomponentupdate), a rerender will still happen starting at the component itself using `useContext`.
Don't forget that the argument to `useContext` must be the *context object itself*:

2
content/docs/reference-react.md

@ -128,6 +128,8 @@ const MyComponent = React.memo(function MyComponent(props) {
If your function component renders the same result given the same props, you can wrap it in a call to `React.memo` for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.
`React.memo` only affects props changes. If your function component wrapped in `React.memo` has a [`useState`](/docs/hooks-state.html) or [`useContext`](/docs/hooks-reference.html#usecontext) Hook in its implementation, it will still rerender when state or context change.
By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.
```javascript

Loading…
Cancel
Save