3 ms·

I was definitely mis-understanding functional components because I'd have assumed that memo was the default behaviour. Could anybody with more experience/knowle

by mcintyre1994 8y ago

I was definitely mis-understanding functional components because I'd have assumed that memo was the default behaviour. Could anybody with more experience/knowledge suggest what sort of functional components you'd want to re-render if their props don't change? Cool that there's an easy way to get that behaviour now though! :)

mbrowne 8y ago
I did a good bit of research on the performance differences between different kinds of React components and back in February and submitted a PR to the React docs: https://github.com/reactjs/reactjs.org/pull/645 https://github.com/reactjs/reactjs.org/pull/645. If you want to read it (note: no one on the React team has reviewed this yet, but I was careful to confirm my findings): you can do so here: https://deploy-preview-645--reactjs.netlify.com/docs/optimizing-performance.html#functional-vs-class-components https://deploy-preview-645--reactjs.netlify.com/docs/optimiz.... Unfortunately there is a long backlog of PRs to the React docs waiting for review so I don't know if/when this info might be incorporated into the docs. Also React is evolving so fast that it would need to be updated, e.g. to mention memo, and given that fast evolution I can understand why there's a backlog. But I do hope that someone on the React team eventually has time to look at adding more explanation to the "Optimizing Performance" section.
maaaats 8y ago
I don't think before today it's whether the props change or not, but if the equal check should be deep or not.
sophiebits 8y ago
By default, React doesn’t check if individual props are equal. This is for two reasons: 1. We support using mutable objects in props. Even if a prop is reference identical to the last render, the component might be reading some property of it that has changed. 2. Checking equality of props takes time. In the (common) case where a parent rerenders and it’s children need to change in response, any time we spend comparing will be extra overhead on top of the actual render cost. Often rerendering is fast anyway and adding more comparisons only makes it slower. Because of these, we don’t do these checks by default. Instead, we recommend adding memo/PureComponent/shouldComponentUpdate in places where you know it will make a difference.
- mcintyre1994 8y ago
  Thanks for this explanation, that makes a lot of sense! :)
- sophiebits 8y ago
  (typo: its children need to change)
dbbk 8y ago
This was also my assumption, and the assumption of a lot of people I've seen. I don't think it's well explained.

mbrowne 8y ago

I did a good bit of research on the performance differences between different kinds of React components and back in February and submitted a PR to the React docs: https://github.com/reactjs/reactjs.org/pull/645 https://github.com/reactjs/reactjs.org/pull/645. If you want to read it (note: no one on the React team has reviewed this yet, but I was careful to confirm my findings): you can do so here: https://deploy-preview-645--reactjs.netlify.com/docs/optimizing-performance.html#functional-vs-class-components https://deploy-preview-645--reactjs.netlify.com/docs/optimiz.... Unfortunately there is a long backlog of PRs to the React docs waiting for review so I don't know if/when this info might be incorporated into the docs. Also React is evolving so fast that it would need to be updated, e.g. to mention memo, and given that fast evolution I can understand why there's a backlog. But I do hope that someone on the React team eventually has time to look at adding more explanation to the "Optimizing Performance" section.

maaaats 8y ago

I don't think before today it's whether the props change or not, but if the equal check should be deep or not.

sophiebits 8y ago

By default, React doesn’t check if individual props are equal. This is for two reasons: 1. We support using mutable objects in props. Even if a prop is reference identical to the last render, the component might be reading some property of it that has changed. 2. Checking equality of props takes time. In the (common) case where a parent rerenders and it’s children need to change in response, any time we spend comparing will be extra overhead on top of the actual render cost. Often rerendering is fast anyway and adding more comparisons only makes it slower. Because of these, we don’t do these checks by default. Instead, we recommend adding memo/PureComponent/shouldComponentUpdate in places where you know it will make a difference.

mcintyre1994 8y ago
Thanks for this explanation, that makes a lot of sense! :)
sophiebits 8y ago
(typo: its children need to change)

dbbk 8y ago

This was also my assumption, and the assumption of a lot of people I've seen. I don't think it's well explained.