4 ms·
This feels to me like another example of how the drive to use nothing but functional components in React is harming readability. Class based components were all
by jon-wood 5y ago
This feels to me like another example of how the drive to use nothing but functional components in React is harming readability. Class based components were allowed to define a `shouldComponentUpdate` method which would be called ahead of rendering to decide whether a re-render is needed.
Having the parent component memoise the component instead feels like a step backwards as we're now asking the parent to carry an understanding of a child component's implementation to decide whether re-renders are needed, rather than allowing the child to communicate that up the tree.
- beaconstudios 5y agothe parent doesn't have to memoise the component though. You can do this: export default React.memo(function myComponent(props) { // implementation }); though you would likely want to set displayName before exporting, in reality.
- jon-wood 5y agoIn which case, I stand corrected. I’ve not used React for a while and wasn’t aware that was possible.
- FalconSensei 5y agoBut that is still memo-ing, just in a different part of the code. And I'm not sure wrapping all components in React.memo is a good practice, otherwise all components would be memo-ed by default. `shouldComponentUpdate` is more explicit
- ramesh31 5y agoHave you ever dug through a complex heavily nested application trying to debug a performance issue, only to find a custom shouldComponentUpdate method within every individual component? It makes debugging an absolute nightmare.
- psadri 5y agoWhat is your proposed alternative?
- notpachet 5y agoNot the OP, but in a word: Redux.
- kecupochren 5y agoWhat? Redux doesn't do any performance optimizations.
- notpachet 5y agoNot by itself, but most people who use React + Redux use the (unsurprisingly named) react-redux glue library, too. That does a lot of the "should component update" calculations for you as a function of the computed `map[State/Dispatch]ToProps` result. (There are still some gotchas with caching selectors and so on, but I personally find those a lot easier to implement post-fact than memoizing hook soup codebases once you realize you have a problem.)
- kecupochren 5y agoOh, I never knew that. TIL
- nsonha 5y agono? If you want state management you use a state management library. If you want optimization, you do memo, or pure component. You don't rely on the fact that some state library does that for you. You don't want your component's performance changes drastically when you refactor to context or whatever
- notpachet 5y agoSee my response to another comment in this thread. react-redux manages shouldComponentUpdate on your behalf. That's what's being discussed: the pain that comes from custom shouldComponentUpdate implementations. I almost never have to write custom component lifecycle methods when using Redux.