Optimizing React Apps in Practice (opens in new tab)

(marmelab.com)

70 pointsalexwolfe8y ago9 comments

9 comments

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.

hellofunk8y ago

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

ng128y ago

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.

matt40778y ago

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.

azundo8y ago

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.

tarr118y ago

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.

acemarke8y ago

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.

tarr118y ago

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

https://babeljs.io/docs/plugins/transform-react-constant-ele...

blitmap8y ago

I want to say you can 'hint' this by Object.freeze()'ing it.

j / k navigate · click thread line to collapse

9 comments

regecks8y ago

hellofunk8y ago

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

ng128y ago

matt40778y ago

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.

azundo8y ago

tarr118y ago

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.

acemarke8y ago

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.

tarr118y ago

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

https://babeljs.io/docs/plugins/transform-react-constant-ele...

blitmap8y ago

I want to say you can 'hint' this by Object.freeze()'ing it.

j / k navigate · click thread line to collapse