Skip to content
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

Merged
merged 4 commits into from
Oct 23, 2018
Merged

Document React.memo #1282

merged 4 commits into from
Oct 23, 2018

Conversation

sebmarkbage
Copy link
Contributor

Supersedes #1266

@@ -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.
Copy link
Member

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?


`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.
Copy link
Member

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.)

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) {
Copy link
Member

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

@reactjs-bot
Copy link

reactjs-bot commented Oct 23, 2018

Deploy preview for reactjs ready!

Built with commit f9da7e9

https://deploy-preview-1282--reactjs.netlify.com

### `React.memo`

```javascript
const MyComponent = React.memo(function(props) {
Copy link
Member

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

otherwise return false
*/
}
export default React.memo(MyComponent, equals);
Copy link
Contributor Author

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems fine to me

Copy link
Member

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool

@gaearon gaearon merged commit 1601307 into reactjs:master Oct 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants