Tao of React – Software Design, Architecture & Best Practices

Alex Kondov, Tech Lead at Financial Times, has compiled a huge list of best practices when it comes to writing React.

This article is a collection of principles and rules that have proven to be effective for me and the teams I’ve worked with.

I outline good practices about components, application structure, testing, styling, state management and data fetching. Some of the examples are oversimplified so we can focus on the principle not on the implementation.

Although Alex warns that it’s an opinion and not an absolute, the TOC alone — except for the CSS-in-JS part 😛 — already has me nodding along:

• Components

  • Favor Functional Components
  • Write Consistent Components
  • Name Components
  • Organize Helper Functions
  • Don’t Hardcode Markup
  • Component Length
  • Component Length
  • Write Comments
  • Use Error Boundaries
  • Destructure Props
  • Number of Props
  • Use Objects Instead of Primitives
  • Conditional Rendering
  • Avoid Nested Ternary Operators
  • Move Lists in Components
  • Assign Default Props When Destructuring
  • Avoid Nested Render Functions
  • Prefer Hooks

• State Management

  • Use Reducers
  • Use Data Fetching Libraries
  • State Management Libraries

• Component Mental models

  • Container and Presentational
  • Stateless and Stateful

• Application Structure

  • Group by Route/Module
  • Create a Common Module
  • Use Absolute Paths
  • Wrap External Components
  • Move Components in Folders

• Performance

  • Don’t Optimize Prematurely
  • Watch Bundle Size
  • Rerenders – Callbacks, Arrays and Objects

• Testing

  • Don’t Rely on Snapshot Tests
  • Test Correct Rendering
  • Validate State and Events
  • Test Edge Cases
  • Write Integration Tests

• Styling

  • Use CSS-in-JS
  • Keep Styled Components Together

• Data Fetching

  • Use a Data Fetching Library

Amazing work, Alex!

Tao of React – Software Design, Architecture & Best Practices →