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.
- Thomas Aylott
- Lucas Reis
With special guest: Vitali Zaidman
- Nrwl | Nx.Dev/React
- Sentry use the code "devchat" for 2 months free on Sentry's small plan
- Ruby Rogues
"The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood will be out on November 20th on Amazon. Get your copy on that date only for $1.
- 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
How do you respond when someone says React is not performant?
React is very performant unless you do certain things. If your React application is slow, it’s down to the tools you use. Performance is a feature, and it should be treated like any other.
What is the difference between premature optimization and good architecture?
While it is important to be data driven and consider performance a business environment, but ultimately it comes down to experience.
What is a good technique to prevent performance issues?
It is important to remember that developers have strong computers but users generally do not. As you build, check your project on slower devices to make sure that it is accessible on all platforms.
What is why-did-you-render?
Why-did-you-render is a tool that patches React to notify you about avoidable re-renders. It works for React Native as well.