Optimizing React Apps in Practice
marmelab.com
Optimizing React Apps in Practice
1–10 of 10 posts
Re: Optimizing React Apps in Practice
#2A 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.
Re: Optimizing React Apps in Practice
#3I 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.
Re: Optimizing React Apps in Practice
#4A 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…
> 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.
Re: Optimizing React Apps in Practice
#5React 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.
Re: Optimizing React Apps in Practice
#6A 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…
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.
Re: Optimizing React Apps in Practice
#7React 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.
I want to say you can 'hint' this by Object.freeze()'ing it.
Re: Optimizing React Apps in Practice
#8A 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…
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.
Re: Optimizing React Apps in Practice
#9React 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.
Re: Optimizing React Apps in Practice
#10React 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…
This babel preset might do it. I haven't tried but it looks promising...
https://babeljs.io/docs/plugins/transform-react-constant-ele...