-
Notifications
You must be signed in to change notification settings - Fork 7.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Document React.memo #1282
Document React.memo #1282
Conversation
content/docs/reference-react.md
Outdated
@@ -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. | |||
|
|||
React components can also be defined as functions which can be wrapped by further functionality. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
functions [...] functionality
a bit repetitive?
content/docs/reference-react.md
Outdated
|
||
`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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Our readers probably don't know what "memoize" means. Maybe add
(This means that React will skip rendering the component, and reuse the last rendered result.)
content/docs/reference-react.md
Outdated
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 render(props) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should probably encourage proper name here so it shows up in DevTools
Deploy preview for reactjs ready! Built with commit f9da7e9 |
content/docs/reference-react.md
Outdated
### `React.memo` | ||
|
||
```javascript | ||
const MyComponent = React.memo(function(props) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also maybe name this too
Uses default exports
content/docs/reference-react.md
Outdated
otherwise return false | ||
*/ | ||
} | ||
export default React.memo(MyComponent, equals); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thoughts on using export default
here? I don't want to name it something like MyComponentMemo
since then people will just copy that pattern which is not how you're supposed to do it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
seems fine to me
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cool
Supersedes #1266