React Round Up
RRU 087: The why-did-you-render Library and React Performance with Vitali Zaidman
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