Browse Source

Revert "Added inline child function caveat to Context docs"

This reverts commit 691cd4577c.
main
Brian Vaughn 7 years ago
parent
commit
3a36a402a5
  1. 14
      content/docs/context.md
  2. 15
      examples/context/consumer-cached-function-as-a-child.js
  3. 15
      examples/context/consumer-inline-function-as-a-child.js

14
content/docs/context.md

@ -69,9 +69,7 @@ Accepts a `value` prop to be passed to Consumers that are descendants of this Pr
A React component that subscribes to context changes.
Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. The function should be created inline, as shown in the example above, rather than being bound to the instance or otherwise cached. (Refer to the see [Caveats](#consumer-inline-function-as-a-child) section below for more.)
All consumers are re-rendered whenever the Provider value changes. Changes are determined by comparing the new and old values using the same algorithm as [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description). (This can cause some issues when passing objects as `value`: see [Caveats](#objectis).)
Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. All consumers are re-rendered whenever the Provider value changes. 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). (This can cause some issues when passing objects as `value`: see [Caveats](#caveats).)
> Note
>
@ -136,16 +134,6 @@ One issue with the render prop API is that refs don't automatically get passed t
## Caveats
### `Consumer` Inline Function as a Child
As an optimization to avoid doing unnecessary work, React currently stops rendering when it sees children that are equal to the most recently rendered children. This applies to the [function as a child](/docs/render-props.html#using-props-other-than-render) pattern used by `Consumer` as well which can cause unexpected behavior in some situations:
`embed:context/consumer-cached-function-as-a-child.js`
To avoid this scenario, we recommend declaring the child function inline:
`embed:context/consumer-inline-function-as-a-child.js`
### `Object.is`
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`

15
examples/context/consumer-cached-function-as-a-child.js

@ -1,15 +0,0 @@
class Example extends React.Component {
// This method will be called when the context value changes,
// But not when the props value changes!
renderValue = value => {
return (
<div>
Context value:{value}. Props value:{this.props.counter}
</div>
);
};
render() {
return <Ctx.Consumer>{this.renderValue}</Ctx.Consumer>;
}
}

15
examples/context/consumer-inline-function-as-a-child.js

@ -1,15 +0,0 @@
class Example extends React.Component {
render() {
// The inline function will be called when the context value changes,
// And when the props value changes!
return (
<Ctx.Consumer>
{value => (
<div>
Context value:{value}. Props value:{this.props.counter}
</div>
)}
</Ctx.Consumer>
);
}
}
Loading…
Cancel
Save