Optimizing React Apps in Practice
marmelab.comA few choice websites have definitely colored my view of React (e.g. Airbnb, multi-second delay clicking onto a form text field on current generation Android and iPhone? I hope they see some of the techniques in this article).
It's hard to know if this is due to the way the article is written but it seems like you're sacrificing both developer ergonomics and runtime performance in this situation. I am curious to hear about similar scenarios in competing frameworks like Vue.
> multi-second delay clicking onto a form text field on current generation Android and iPhone
That doesn't make any sense. Whatever's happening there, highly unlikely it is due to React. I've run React apps on iOS for years with none of those issues.
I don't think that's React related. React Perf issues only pop up when you have lots of nested nodes with updating data. The only components I've ever needed to optomize are similar to the table referenced in the article.
The likely culprit is that Airbnb has lots of token-style inputs (i. e. "countries you have been") and it does a lot of data fetching when you interact with these fields.
I can't recommend reselect enough if you're using redux. Not only does it save time when computing derived data from your reducer state it also isolates your components from the structure of your reducer state. Change the location of some data in your reducer? No problem, just adjust your selector in one place and none of your components need changing.
React really should be able to detect object literals in style components and optimize those away into a const under the hood. Hopefully this is fixed in a future version.
React doesn't do any "compiling". It simply takes the JS object tree that _you_ generated in your component's render function, and works from there. So yes, if you are declaring object literals in your render method, that will be a new object each time the component re-renders.
If you know that a given style object is never going to change, you can hoist it out of your component's render method into the module scope yourself.
This babel preset might do it. I haven't tried but it looks promising...
https://babeljs.io/docs/plugins/transform-react-constant-ele...
I want to say you can 'hint' this by Object.freeze()'ing it.