Skip to content

Commit 1601307

Browse files
sebmarkbagegaearon
authored andcommitted
Document React.memo (reactjs#1282)
* Document React.memo * Use named functions in memo Uses default exports * Nits * Tweak to "areEqual" to match the note below
1 parent c90d27a commit 1601307

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

content/docs/reference-react.md

+40
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ React components let you split the UI into independent, reusable pieces, and thi
2626

2727
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.
2828

29+
React components can also be defined as functions which can be wrapped:
30+
31+
- [`React.memo`](#reactmemo)
32+
2933
### Creating React Elements
3034

3135
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
8892
8993
* * *
9094

95+
### `React.memo`
96+
97+
```javascript
98+
const MyComponent = React.memo(function MyComponent(props) {
99+
/* render using props */
100+
});
101+
```
102+
103+
`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.
104+
105+
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.
106+
107+
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.
108+
109+
```javascript
110+
function MyComponent(props) {
111+
/* render using props */
112+
}
113+
function areEqual(prevProps, nextProps) {
114+
/*
115+
return true if passing nextProps to render would return
116+
the same result as passing prevProps to render,
117+
otherwise return false
118+
*/
119+
}
120+
export default React.memo(MyComponent, areEqual);
121+
```
122+
123+
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.
124+
125+
> Note
126+
>
127+
> 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`.
128+
129+
* * *
130+
91131
### `createElement()`
92132

93133
```javascript

0 commit comments

Comments
 (0)