Splitting UI into Components
Recognizing When to Split
A component that handles too many unrelated pieces of UI or logic at once becomes hard to read, test, and reuse. A common signal it's time to split is when a component's JSX has multiple clearly separate sections, or its logic handles more than one concern.
Note: If you struggle to describe what a component does in one short sentence, it's probably doing too much.
Warning: Splitting purely by line count rather than by logical responsibility can produce awkward, tightly-coupled pieces.
Example: Recognizing When to Split
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function UserProfileBig({ name, bio, followers }) {
return (
<div>
<h2>{name}</h2>
<p>{bio}</p>
<p>{followers} followers</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserProfileBig name="Sam" bio="Loves React" followers={120} />);
</script>
</body>
</html>Splitting into Focused Pieces
The same UI can be broken into smaller components, each handling one clear responsibility, then composed back together in a parent component. This makes each piece easier to test, reuse, and reason about on its own.
Note: Give each split-out component a name matching exactly what it renders, like UserName or FollowerCount.
Warning: After splitting, make sure data still flows correctly via props -- a common mistake is forgetting to pass a needed prop down to the new smaller component.
Example: Splitting into Focused Pieces
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function UserName({ name }) { return <h2>{name}</h2>; }
function UserBio({ bio }) { return <p>{bio}</p>; }
function FollowerCount({ count }) { return <p>{count} followers</p>; }
function UserProfile({ name, bio, followers }) {
return <div><UserName name={name} /><UserBio bio={bio} /><FollowerCount count={followers} /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserProfile name="Sam" bio="Loves React" followers={120} />);
</script>
</body>
</html>Passing Data After Splitting
Once a component is split apart, the pieces still need to share data -- this is done entirely through props, just like any other parent-child relationship. The parent component holds the data and passes down exactly what each child needs.
Note: Keep the parent component focused on gathering/holding data and delegate rendering details to its split-out children.
Warning: A common mistake after splitting is forgetting to pass a prop the child component actually needs, leaving it undefined.
Example: Passing Data After Splitting
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Title({ text }) { return <h2>{text}</h2>; }
function Subtitle({ text }) { return <p>{text}</p>; }
function Header({ title, subtitle }) {
return <div><Title text={title} /><Subtitle text={subtitle} /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Header title="Dashboard" subtitle="Overview of your data" />);
</script>
</body>
</html>- Waiting far too long to split a component, letting it grow into an unmanageable 'god component'.
- Splitting a component into pieces that are so tightly coupled they can't really be used independently.
- Creating too many tiny fragments for extremely simple UI, adding overhead without real benefit.
- Large components should be split into smaller, focused components as they grow.
- Each split-out component should ideally have one clear responsibility.
- Splitting improves readability, testability, and reuse.
- Props and children are the tools used to connect split-apart components back together.
No browser-specific restrictions -- this is a code organization practice.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: