Component Composition

A school dashboard needs an attendance summary and a marks summary. Putting all markup into App makes it difficult to understand each panel’s role and reuse a summary elsewhere.

Composition means assembling larger interfaces from smaller components. Choose boundaries around useful responsibilities, not arbitrary line counts. A component that explains a recognizable school concept is easier to name, test and reuse.

Explain
Split a report into components with useful responsibilities.
Trace
Read the data flow from the parent to each child.
Apply
Recognize when an extra component adds complexity without useful reuse.

Composition: follow the relationship

App supplies facts
Attendance is 28 of 30; the class average is 72.
Focused summaries
AttendanceSummary and MarksSummary each describe one part.
Class dashboard
The parent arranges both summaries beneath one heading.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

Draw the tree before splitting code: App contains Dashboard; Dashboard contains AttendanceSummary and MarksSummary. Data travels from the owner toward the components that use it. A shared frame can accept children while a specialized summary accepts explicit data props.

Locate information near its owner

Ownership explains where props start and where change requests return. If only one summary uses a value, keeping it close to that summary is reasonable. When two panels must agree on a changing value, their closest shared parent can own it and pass the same value downward.

A component tree is a rendering relationship, while import dependencies describe files. They need not have identical shapes. Several components can share one file, and a component imported from another file can be reused in multiple tree positions. Understand the interface relationship before reorganizing folders.

Read the complete React example

The example keeps the two summaries independent and puts the overall heading in App. The practice adds a Card frame that wraps either summary. The frame does not calculate attendance or marks because those responsibilities belong to the summary components.

React · JavaScript with JSX

import React from 'react';
function AttendanceSummary({ present, total }) {
  return <p>Attendance: {present} of {total}</p>;
}
function MarksSummary({ marks }) {
  return <p>Class average: {marks}</p>;
}
export default function App() {
  return <main><h1>Class dashboard</h1><AttendanceSummary present={28} total={30} /><MarksSummary marks={72} /></main>;
}

Expected screen and behavior

Initial screen: Class dashboard Attendance: 28 of 30 Class average: 72

Connect the source to the screen

React · main example

import React from 'react';
function AttendanceSummary({ present, total }) {
  return <p>Attendance: {present} of {total}</p>;
}
function MarksSummary({ marks }) {
  return <p>Class average: {marks}</p>;
}
export default function App() {
  return <main><h1>Class dashboard</h1><AttendanceSummary present={28} total={30} /><MarksSummary marks={72} /></main>;
}

Composition works through returned elements. React recursively renders the tree and connects each component’s output to its position. Reusing a component definition creates separate instances rather than one shared DOM node moved between locations.

Avoid the common mistakes

Avoid components that accept dozens of flags for unrelated behaviors. When the meaning of a panel becomes unclear, prefer separate components composed inside a common frame. Excessive splitting is also costly: extracting one punctuation mark rarely creates a meaningful responsibility.

Practice before reading the solution

React · starting example

import React from 'react';
function AttendanceSummary({ present, total }) {
  return <p>Attendance: {present} of {total}</p>;
}
function MarksSummary({ marks }) {
  return <p>Class average: {marks}</p>;
}
export default function App() {
  return <main><h1>Class dashboard</h1><AttendanceSummary present={28} total={30} /><MarksSummary marks={72} /></main>;
}

Wrap attendance and marks summaries in the same Card component.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The solution repeats a frame rather than repeating summary logic. A later change to the Card boundary applies to both panels. The two summary props remain explicit, so a reader can see which numbers are attendance values and which are marks.

React · JavaScript with JSX

import React from 'react';
function Card({ title, children }) {
  return <section><h2>{title}</h2>{children}</section>;
}
function AttendanceSummary({ present, total }) {
  return <p>{present} of {total} present</p>;
}
function MarksSummary({ marks }) {
  return <p>Average: {marks}</p>;
}
export default function App() {
  return <main><Card title="Attendance"><AttendanceSummary present={28} total={30} /></Card><Card title="Marks"><MarksSummary marks={72} /></Card></main>;
}

Expected screen and behavior

Initial screen: Attendance 28 of 30 present Marks Average: 72

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

Use the idea in the next lesson

Composition means assembling larger interfaces from smaller components. Choose boundaries around useful responsibilities, not arbitrary line counts. A component that explains a recognizable school concept is easier to name, test and reuse.

Continue with Keeping Components Pure. Revisit Rendering Lists and Keys when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on Component Composition.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Keeping Components Pure →

Component Composition