Episode 12 of 32

Reusing Components

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