Nikola Đuza

Software Engineer

Novi Sad

Rails and React

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

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

why-did-you-update

React is can be slow

  • Triggering Layout

  • Layout trashing

FastDOM

More useful tools

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

Made with Slides.com