React Best Practices

Chapter 1 · Practice 4 of 5

Split components by responsibility, not by line count

From Components and purity

Why it matters

A good component has one reason to change. A page that fetches data, holds form state, formats dates and renders a table is hard to read and hard to test.

Pull out pieces when they have a clear name and a clear job:

  • a component such as PriceTag,
  • a custom hook such as useCart,
  • a helper such as formatDate.

Prefer composition through children and props over deep prop drilling or inheritance. A layout component that accepts children lets the parent decide what goes inside, which often removes the need for context.

You know the split is right when each file can be explained in one sentence. Line count alone is not a reason to split.

Do

  • Extract logic into custom hooks named useSomething
  • Pass JSX as children to build flexible layouts

Avoid

  • Splitting a component just because it passed 100 lines