Reusing Components

🧑‍🏫

NoteArc Instruction

Episode 12 of 32· 1 min read

See how components can be reused with different props to avoid code duplication.

One of the biggest advantages of React is component reusability.

Same Component, Different Data

// Filter and reuse the same BlogList component
<BlogList blogs={blogs} title="All Blogs" />
<BlogList
  blogs={blogs.filter(b => b.author === "Mario")}
  title="Mario's Blogs"
/>

Benefits

DRY code — Write once, use everywhere
Consistent UI — Same component ensures identical look
Easy maintenance — Fix in one place, fixed everywhere