You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: content/docs/reference-react.md
+40
Original file line number
Diff line number
Diff line change
@@ -26,6 +26,10 @@ React components let you split the UI into independent, reusable pieces, and thi
26
26
27
27
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.
28
28
29
+
React components can also be defined as functions which can be wrapped:
30
+
31
+
-[`React.memo`](#reactmemo)
32
+
29
33
### Creating React Elements
30
34
31
35
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` 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
+
functionMyComponent(props) {
111
+
/* render using props */
112
+
}
113
+
functionareEqual(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
+
exportdefaultReact.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`.
0 commit comments