React Round Up

React Round Up


RRU 087: The why-did-you-render Library and React Performance with Vitali Zaidman

November 12, 2019

Vitali Zaidman works for the WellDone Software consultancy. He has worked with a lot of different technologies, but currently works with React. In a recent React meetup, he talked about React performance. When someone says that React is not performant, Vitali disagrees and says that it is very performant unless you do certain things. If your React application is slow, it’s down to the tools you use. The panelists all agree that premature optimization is the root of all evil. The difference between premature optimization and good architecture comes down to experience. It is important to be data driven and consider performance a business environment. Vitali believes that performance is a feature and should be treated like any other. 

The panel discusses accessibility versus internationalization. Launching to one language is different than launching to one set of abilities. While you don’t need to internationalize on day one, don’t make it impossible to internationalize. They talk about how creating a timeline of changes in your project can help you pinpoint where your performance issues came from. It is also important to remember that developers have strong computers, while users generally do not. As you build, check your product on slower devices to make sure that it works for your users. 

Vitali talks about his tool why-did-you-render, which will notify you of avoidable re-renders. He also talks about considering why you are choosing to use React and whether or not is the correct choice for your project. The panel discusses their feelings on pure components. They talk about the importance of code review and manual QA since not everything can be automated, again suggesting having a slow computer or phone in the office to test as you go. They also agree that it is important to understand how your library works. They talk about the huge amount of work that is required to maintain an open source project, and how development is a team effort if you want to create sustainable software. The show concludes with Vitali talking about a performance issue he encountered and how he recognized it, diagnosed the problem, and fixed it. 

Panelists


Thomas Aylott


Lucas Reis


With special guest: Vitali Zaidman

Sponsors


Nrwl | Nx.Dev/React


Sentry use the code “devchat” for 2 months free on Sentry’s small plan


Ruby Rogues


Links


Knockout


Why did you render


Fusion.js: A Plugin-based Universal Web Framework - Leo Horie

React Element's 'Parent' vs Rendered By
How To Reduce Unnecessary Re-Renders
Why Performance Matters
Performance Impact Calculator
Welldone Software

Follow DevChatTV on Facebook and Twitter

Picks

Thomas Aylott:


Face-API.js


React force graph


React 3 Fiber


Lucas Reis:


Opendoodles.com


Adopting Optimizely at Compass


Vitali Zaidman:


JSJ 402: SEO for Developers with Vitali Zaidman