Nikola Đuza

Software Engineer

Novi Sad

Rails and React

nikolalsvk.github.io

Bez alata nema zanata:

Kako optimizovati React aplikaciju

React is fast

Virtual DOM

Virtual DOM

• copy of the DOM in the memory
• reconciliation algorithm

React is slow

React is can be slow

Useless component rerenders

What happens if

we update one of the Post components?

Children rerender if the parent changes

Useless component rerenders

• can be expensive
• can be avoided

... but how?!?!

shouldComponentUpdate

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdate

• DO NOT use too early
• DO NOT use everywhere

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

PureComponent

• does a shallow equality check

• think of the children 🧒

why-did-you-update

https://github.com/maicki/why-did-you-update

why-did-you-update

why-did-you-update

React is can be slow

• Triggering Layout

• Layout trashing

FastDOM

https://github.com/wilsonpage/fastdom

FastDOM demo

More useful tools

• React DevTools
• Google Chrome Performance Tab
• Redux DevTools

React DevTools

React DevTools

Chrome Performance Tab

Performance is the art of avoiding work, and making any work you do as efficient as possible.

Paul Lewis

Useful links