Browse Source

Document React.memo (#1282)

* Document React.memo

* Use named functions in memo

Uses default exports

* Nits

* Tweak to "areEqual" to match the note below
main
Sebastian Markbåge 6 years ago
committed by Dan Abramov
parent
commit
1601307c1e
  1. 40
      content/docs/reference-react.md

40
content/docs/reference-react.md

@ -26,6 +26,10 @@ React components let you split the UI into independent, reusable pieces, and thi
If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/docs/react-without-es6.html) for more information. If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/docs/react-without-es6.html) for more information.
React components can also be defined as functions which can be wrapped:
- [`React.memo`](#reactmemo)
### Creating React Elements ### Creating React Elements
We recommend [using JSX](/docs/introducing-jsx.html) to describe what your UI should look like. Each JSX element is just syntactic sugar for calling [`React.createElement()`](#createelement). You will not typically invoke the following methods directly if you are using JSX. We recommend [using JSX](/docs/introducing-jsx.html) to describe what your UI should look like. Each JSX element is just syntactic sugar for calling [`React.createElement()`](#createelement). You will not typically invoke the following methods directly if you are using JSX.
@ -88,6 +92,42 @@ If your React component's `render()` function renders the same result given the
* * * * * *
### `React.memo`
```javascript
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});
```
`React.memo` is a [higher order component](/docs/higher-order-components.html). It's similar to [`React.PureComponent`](#reactpurecomponent) but for function components instead of classes.
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.
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
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
```
This method only exists as a **[performance optimization](/docs/optimizing-performance.html).** Do not rely on it to "prevent" a render, as this can lead to bugs.
> Note
>
> Unlike the [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method on class components, the `areEqual` function returns `true` if the props are equal and `false` if the props are not equal. This is the inverse from `shouldComponentUpdate`.
* * *
### `createElement()` ### `createElement()`
```javascript ```javascript

Loading…
Cancel
Save