![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5276586/png_logo.png)
Nikola Đuza
Software Engineer
Novi Sad
Rails and React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243581/nikola.png)
Bez alata nema zanata:
Kako optimizovati React aplikaciju
React is fast
Virtual DOM
Virtual DOM
- copy of the DOM in the memory
- reconciliation algorithm
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5221445/actual-dom-update.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5221447/react-dom-reconciliation.png)
React is slow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5221510/wat.jpg)
React is can be slow
Useless component rerenders
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243170/Unnecessary_DOM_updates_posts__3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265032/Unnecessary_DOM_updates_full.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265033/Unnecessary_DOM_updates_full__1_.png)
What happens if
we update one of the Post components?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265034/Unnecessary_DOM_updates_full__2_.png)
Children rerender if the parent changes
Useless component rerenders
- can be expensive
- can be avoided
... but how?!?!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265040/2i1qu0.jpg)
shouldComponentUpdate
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265277/carbon__5_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265034/Unnecessary_DOM_updates_full__2_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265274/carbon__4_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265543/carbon__8_.png)
shouldComponentUpdate
- DO NOT use too early
- DO NOT use everywhere
PureComponent
-
does a shallow equality check
-
think of the children 🧒
why-did-you-update
why-did-you-update
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265270/carbon__2_.png)
why-did-you-update
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5223289/why-did-you-update-demo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265034/Unnecessary_DOM_updates_full__2_.png)
React is can be slow
-
Triggering Layout
-
Layout trashing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5242994/frame.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243636/Screen_Shot_2018-09-09_at_4.56.19_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265278/carbon__6_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265279/carbon__7_.png)
FastDOM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243702/Screen_Shot_2018-09-09_at_5.25.02_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243636/Screen_Shot_2018-09-09_at_4.56.19_PM.png)
More useful tools
React DevTools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265562/Screen_Shot_2018-09-16_at_6.12.11_PM.png)
React DevTools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265554/props-and-state-1f4d023f1a0f281386625f28df87c78f.gif)
Chrome Performance Tab
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5265569/1.gif)
Performance is the art of avoiding work, and making any work you do as efficient as possible.
Paul Lewis
Useful links
- https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6
- https://reactjs.org/docs/optimizing-performance.html
- https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
- https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations
- https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3
- https://calibreapp.com/blog/2017-11-28-debugging-react/
How to Optimize a React Application
By Nikola Đuza
How to Optimize a React Application
Methods and tools that can help you optimize bottleneck in React code.
- 1,249