Reusable React Components: Easier Said Than Done

If you’ve ever handed off a React component to a teammate and had it break in production, you’re not alone. Reusability isn’t just about passing a few props, it’s about crafting components that are reliable, intuitive, and adaptable across a growing codebase. I attempted to break down the process of creating reusable UI components in React using TypeScript, using a single case study: the component. The Problem Here’s a reality check: many so-called “reusable components” fall apart under the slightest change. Add a new type of alert, or make it dismissible, and suddenly you’re dealing with prop juggling, unexpected side effects, or broken styling. Why? Because most components are designed to work, not to scale. A Better Approach (React + TypeScript Edition) Let’s walk through a more robust way of creating an component—one that’s: Configurable with props Interactive with state Communicative through custom events Inspired by an example from Carl Rippon’s book Learn React with TypeScript, here’s how to think about it: ✅ Step 1: Define the Structure Using Props Instead of hardcoding everything, make the component configurable: This lets the component adapt to different use cases: a welcome banner, an error message, a success notification. ✅ Step 2: Add Interaction with State Use useState to control visibility internally: If the closable prop is passed, display a close button to allow dismissing the alert. ✅ Step 3: Add Communication with Custom Events Add an onClose prop to allow the parent to know when the alert is dismissed: Now you’ve got a component that is: Visually dynamic Internally manageable Externally aware The best components don’t just “work.” They scale. And the recipe is clear: Use props to customize Use state for behavior Use events to communicate _ This approach becomes even more powerful with TypeScript’s strict typing to prevent runtime bugs and ensure developer clarity._ Resources: React Documentation – useState [Learn React with TypeScript ](https://www.amazon.com/Learn-React-TypeScript-beginners-development/dp/1836643179/

Jun 17, 2025 - 08:50

Reusable React Components: Easier Said Than Done

If you’ve ever handed off a React component to a teammate and had it break in production, you’re not alone. Reusability isn’t just about passing a few props, it’s about crafting components that are *reliable, intuitive, and adaptable across a growing codebase.
*
I attempted to break down the process of creating reusable UI components in React using TypeScript, using a single case study: the
component.

The Problem
Here’s a reality check: many so-called “reusable components” fall apart under the slightest change. Add a new type of alert, or make it dismissible, and suddenly you’re dealing with prop juggling, unexpected side effects, or broken styling.

Why?
Because most components are designed to work, not to scale.

A Better Approach (React + TypeScript Edition)

Let’s walk through a more robust way of creating an component—one that’s:

Configurable with props
Interactive with state
Communicative through custom events

Inspired by an example from Carl Rippon’s book Learn React with TypeScript, here’s how to think about it:

✅ Step 1: Define the Structure Using Props

Instead of hardcoding everything, make the component configurable:

This lets the component adapt to different use cases: a welcome banner, an error message, a success notification.

✅ Step 2: Add Interaction with State

Use useState to control visibility internally:

If the closable prop is passed, display a close button to allow dismissing the alert.

*✅ Step 3: Add Communication with Custom Events
*

Add an onClose prop to allow the parent to know when the alert is dismissed:

Now you’ve got a component that is:

Visually dynamic
Internally manageable
Externally aware

*The best components don’t just “work.” They scale. And the recipe is clear:
*

Use props to customize
Use state for behavior
Use events to communicate _ This approach becomes even more powerful with TypeScript’s strict typing to prevent runtime bugs and ensure developer clarity._

Resources:
React Documentation – useState

[Learn React with TypeScript ](https://www.amazon.com/Learn-React-TypeScript-beginners-development/dp/1836643179/