
Optimizing React Apps in Practice - alexwolfe
http://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html
======
regecks
A 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.

~~~
hellofunk
> 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.

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

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

~~~
acemarke
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.

~~~
tarr11
This babel preset might do it. I haven't tried but it looks promising...

[https://babeljs.io/docs/plugins/transform-react-constant-
ele...](https://babeljs.io/docs/plugins/transform-react-constant-elements/)

