How to write performant React code: rules, patterns, do's and don'ts

Looking into patterns that lead to poor performance of React apps, why they are bad, and how to recognise and avoid them.

Table of contents Performance and React! Such a fun topic with so many controversial opinions and so many best practices flipping to be the opposite in just 6 months. Is it even possible to say anything definitive here or to make any generalized recommendations? Usually, performance experts are the proponents of “premature optimisation is the root of all evil” and “measure first” rules. Which loosely translates into “don’t fix that is not broken” and is quite hard to argue with. But I’m going to anyway 😉 What I like about React, is that it makes implementing complicated UI interactions incred

related reading

• Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
• You Might Not Need an Effect – Reactreact.dev
• Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blogblog.isquaredsoftware.com
• React re-renders guide: everything, all at once | Developer Waydeveloperway.com
• Understanding useMemo and useCallback • Josh W. Comeaujoshwcomeau.com
• When does React re-render components? | Felix Gerschaufelixgerschau.com
• What is Memoization? How and When to Memoize in JavaScript and Reactfreecodecamp.org
• The Interactive Guide to Rendering in Reactui.dev
• React graph viscrubier.github.io
• Implementing React from scratchrob.directory
• Mediumtoyesebalogun95.medium.com
• useCallback – Reactreact.dev