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

Special Guest: Vitali Zaidman.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.