React › Design Patterns in React

What is the single responsibility principle and how does it apply to writing React components?

Beginner

Answer

The single responsibility principle means each component should do just one clear thing, such as displaying a single piece of information or handling one specific interaction. Breaking a large component into smaller, focused ones makes the code easier to read, test, and reuse in other places.

// One big component doing too many things
function UserPage() { /* fetches data, shows profile, shows posts, shows settings */ }

// Split into smaller, focused components
function UserPage() {
  return (
    <>
      <UserProfile />
      <UserPosts />
      <UserSettings />
    </>
  );
}

Real-world example A team breaks apart one giant three hundred line UserPage component into three smaller, focused components, each handling just one job, making the code much easier for new team members to understand.

Common follow-ups: How do you know when a component has grown too large and needs to be split up?;Does following this principle always mean creating more files and more complexity?

Component Composition & Children Props;Components & JSX