Reusable UI components in React - Deep Dive

Overview - Reusable UI components

What is it?

Reusable UI components are pieces of a user interface that you can use again and again in different parts of an app. They are like building blocks that have their own look and behavior. Instead of writing the same code many times, you create a component once and use it wherever needed. This makes building apps faster and easier to maintain.

Why it matters

Without reusable components, developers would have to copy and paste the same UI code repeatedly, which leads to mistakes and makes apps hard to update. Reusable components save time, reduce errors, and keep the app consistent. They help teams work together better because everyone uses the same building blocks.

Where it fits

Before learning reusable UI components, you should understand basic React concepts like JSX, props, and state. After mastering reusable components, you can learn about advanced patterns like hooks, context, and component composition to build complex apps.

Mental Model

Core Idea

A reusable UI component is a self-contained piece of interface that can be used multiple times with different data to build consistent and maintainable apps.

Think of it like...

Reusable UI components are like LEGO bricks: you build one brick carefully, then snap it together many times to create different structures without rebuilding each brick from scratch.

┌─────────────────────────────┐
│       Reusable Component     │
│ ┌───────────────┐           │
│ │ Props (Input) │           │
│ └───────────────┘           │
│           │                 │
│           ▼                 │
│ ┌───────────────────────┐  │
│ │ Render UI based on    │  │
│ │ props and internal    │  │
│ │ logic                 │  │
│ └───────────────────────┘  │
│           │                 │
│           ▼                 │
│ ┌───────────────────────┐  │
│ │ Output: UI Element(s) │  │
│ └───────────────────────┘  │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is a React component

Concept: Introduce the idea of a React component as a function that returns UI elements.

In React, a component is a JavaScript function that returns some UI using JSX syntax. For example: function Button() { return ; } This Button component can be used in your app to show a button.

Result

You get a simple button displayed on the screen when you use the Button component.

Understanding that components are just functions returning UI is the foundation for building reusable pieces.

2

Foundation

Using props to customize components

Concept: Learn how to pass data to components using props to make them flexible.

Props are inputs to components. They let you customize what the component shows or does. For example: function Button(props) { return ; } You can use it like

Result

The Button component shows different labels depending on the prop value.

Props let you reuse the same component with different data, making it flexible and avoiding repeated code.

3

Intermediate

Composing components together

Concept: Combine smaller components inside bigger ones to build complex UI from simple parts.

You can use components inside other components. For example: function Card(props) { return (

{props.title}

{props.children}

); } function App() { return (

This is reusable content inside the card.

); } Here, Card is a reusable container that can wrap any content.

Result

The Card component displays a title and whatever content is placed inside it, allowing flexible UI layouts.

Composing components lets you build complex interfaces by nesting simple reusable blocks, improving organization and reuse.

4

Intermediate

Styling reusable components consistently

Concept: Learn how to apply styles to components so they look consistent wherever used.

You can add CSS classes or styles inside components. For example: function Button(props) { return ; } Using a shared CSS file with .btn-primary ensures all buttons look the same. You can also pass style props for customization.

Result

All Button components have the same look, making the app visually consistent.

Consistent styling is key to making reusable components feel like part of the same app and easier to maintain.

5

Intermediate

Handling events in reusable components

Concept: Add behavior to components by handling user actions like clicks using props.

You can pass functions as props to handle events. For example: function Button(props) { return ; } Use it like

Result

The Button component reacts to user clicks by running the function passed in props.

Passing event handlers as props lets reusable components be interactive and adaptable to different needs.

6

Advanced

Avoiding unnecessary re-renders with memo

🤔Before reading on: do you think React re-renders all components every time state changes? Commit to yes or no.

Concept: Learn how React.memo helps prevent re-rendering components when their props haven't changed.

React.memo is a function that wraps a component to remember its last props. If props are the same, React skips re-rendering it. Example: const Button = React.memo(function Button(props) { return ; }); This improves performance in big apps by avoiding work when UI doesn't need to update.

Result

Components wrapped with React.memo only update when their inputs change, making apps faster.

Knowing how to control rendering helps build efficient reusable components that don't slow down the app.

7

Expert

Designing flexible APIs for components

🤔Before reading on: do you think a reusable component should accept many props or just a few? Commit to your answer.

Concept: Understand how to design component props and structure so they are easy to use, extend, and maintain in large projects.

Good reusable components have clear, minimal props that cover common use cases. They use sensible defaults and support composition (like children). Avoid too many props that confuse users. For example, a Button might accept label, onClick, disabled, and style props only. Also, document props well and keep internal state minimal to avoid bugs.

Result

Well-designed components are easy for other developers to use correctly and extend without breaking.

Designing component APIs thoughtfully prevents confusion and technical debt in large codebases.

Under the Hood

React components are JavaScript functions that return a description of UI elements using JSX. When React renders, it calls these functions to get the UI structure. React keeps a virtual copy of the UI (Virtual DOM) and compares it to the previous version to find changes. It then updates only the real DOM parts that changed. Props are passed as function arguments, and React tracks them to decide when to re-render components.

Why designed this way?

React was designed to make UI development declarative and efficient. Using functions for components fits JavaScript's strengths and makes code easy to read and test. The Virtual DOM diffing reduces costly real DOM updates, improving performance. Passing props as inputs keeps components pure and predictable. This design replaced older manual DOM manipulation approaches that were error-prone and hard to maintain.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Component Fn │──────▶│ Returns JSX   │──────▶│ Virtual DOM   │
└───────────────┘       └───────────────┘       └───────────────┘
         │                                              │
         │                                              ▼
         │                                    ┌─────────────────┐
         │                                    │ Diff with old    │
         │                                    │ Virtual DOM     │
         │                                    └─────────────────┘
         │                                              │
         ▼                                              ▼
┌─────────────────┐                           ┌─────────────────┐
│ Props passed in │                           │ Real DOM update │
└─────────────────┘                           └─────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think reusing a component means copying its code everywhere? Commit to yes or no.

Common Belief: Reusing a component means copying and pasting its code multiple times.

Reality: Reusing a component means creating it once and using its name (like a tag) multiple times, not copying its code.

Why it matters: Copying code leads to bugs and hard maintenance, while true reuse keeps code DRY and consistent.

Quick: Do you think a reusable component must have no internal state? Commit to yes or no.

Common Belief: Reusable components should never have their own state; they must be stateless.

Reality: Reusable components can have internal state if it helps manage their behavior, but state should be minimal and controlled.

Why it matters: Avoiding all state can make components less flexible; managing state properly leads to better encapsulation.

Quick: Do you think React.memo always improves performance? Commit to yes or no.

Common Belief: Wrapping every component with React.memo always makes the app faster.

Reality: React.memo helps only when components receive the same props often; overusing it can add overhead and complexity.

Why it matters: Misusing React.memo can cause unnecessary complexity and even slow down the app.

Quick: Do you think styling reusable components inline is always best? Commit to yes or no.

Common Belief: Inline styles are the best way to style reusable components for consistency.

Reality: Inline styles limit flexibility and reusability; using CSS classes or styled components is usually better for consistent styling.

Why it matters: Poor styling choices can make components hard to theme or maintain across large apps.

Expert Zone

1

Reusable components should balance flexibility and simplicity; too many props make them hard to use, too few limit usefulness.

2

Using composition (children and render props) often leads to more powerful and flexible reusable components than many boolean props.

3

Memoization and hooks like useCallback help optimize performance but require careful understanding to avoid bugs and stale data.

When NOT to use

Avoid making components reusable if they are very specific to one place and unlikely to be reused; in such cases, simpler inline code is better. For complex state management, consider using state management libraries like Redux or Context API instead of stuffing logic into components.

Production Patterns

In real apps, reusable components are organized in shared libraries or design systems with strict API contracts and documentation. Teams use tools like Storybook to develop and test components in isolation. Components often support theming and accessibility features to work in diverse environments.

Connections

Modular programming

Reusable UI components are a form of modular programming applied to user interfaces.

Understanding modular programming helps grasp why breaking UI into components improves code organization and reuse.

Object-oriented design

Components encapsulate data (props/state) and behavior, similar to objects in OOP.

Knowing OOP concepts clarifies how components manage their own state and expose interfaces via props.

Manufacturing assembly lines

Reusable components are like standardized parts in an assembly line that fit together to build products efficiently.

Seeing components as standardized parts helps appreciate the efficiency and consistency they bring to app development.

Common Pitfalls

#1 Creating components that are too specific and not reusable.

Wrong approach:

function Button() {
return ;
}

Correct approach:

function Button(props) {
return ;
}

Root cause:

Not thinking about flexibility and reusability when designing components.

#2 Passing too many props making component usage confusing.

Wrong approach:

function Card(props) {
return {props.children};
}

Content

Correct approach:

function Card({children, style}) {
return {children};
}

Content

Root cause:

Trying to control every style detail via props instead of using style objects or CSS.

#3 Not handling events via props, hardcoding behavior inside component.

Wrong approach:

function Button() {
return ;
}

Correct approach:

function Button(props) {
return ;
}

Root cause:

Mixing component logic with specific app behavior reduces reusability.

Key Takeaways

Reusable UI components are self-contained pieces of interface that can be used multiple times with different data.

Props let you customize components, making them flexible and avoiding repeated code.

Composing components together builds complex UI from simple, reusable blocks.

Good reusable components have clear, minimal APIs and consistent styling for easy use and maintenance.

Understanding React's rendering and optimization tools like React.memo helps build efficient reusable components.

Practice

1. What is the main benefit of creating reusable UI components in React?

easy

A. They automatically fix bugs

B. They make the app run faster

C. They save time and keep the app consistent

D. They replace the need for CSS styling

Solution

1. Step 1: Understand the purpose of reusable components

   Reusable components are designed to be used multiple times, reducing repeated code.

2. Step 2: Identify the main benefit

   Using reusable components saves development time and keeps the app's look and behavior consistent.

3. Final Answer:

   They save time and keep the app consistent -> Option C

4. Quick Check:

   Reusable components = save time + consistency [OK]

Hint: Reusable means use again to save time and stay consistent [OK]

Common Mistakes:

• Thinking reusable components speed up app runtime
• Believing they fix bugs automatically
• Confusing styling with component reuse

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a React component Card?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed as attributes with name=value pairs, using quotes for strings.

2. Step 2: Check each option

   uses correct JSX syntax: title="Hello". Others have syntax errors.

3. Final Answer:

   <Card title="Hello" /> -> Option A

4. Quick Check:

   Props in JSX use name="value" [OK]

Hint: Props look like HTML attributes with quotes for strings [OK]

Common Mistakes:

• Using curly braces without variable (Option B)
• Adding extra quotes around prop name (Option C)
• Using colon instead of equals (Option A)

3. Given this React component:

function Button({ label }) {
  return <button>{label}</button>;
}

// Usage:
<Button label="Click me" />

What will be rendered on the page?

medium

A. label

B. Nothing will render

C. {label}

D. Click me

Solution

1. Step 1: Understand prop usage in the component

   The component receives label as a prop and inserts it inside the button element.

2. Step 2: Check the usage

   The component is used with label="Click me", so the button shows "Click me" text.

3. Final Answer:

   <button>Click me</button> -> Option D

4. Quick Check:

   Prop label = "Click me" shown inside button [OK]

Hint: Props passed show as content inside component tags [OK]

Common Mistakes:

• Thinking the literal word 'label' appears
• Confusing JSX expression with string
• Assuming component renders nothing without explicit return

4. What is wrong with this reusable React component code?

function Alert(props) {
  return <div>{message}</div>;
}

// Usage:
<Alert message="Warning!" />

medium

A. The variable 'message' is not defined inside the component

B. The component does not receive props correctly

C. The usage of the component is incorrect

D. The component should return a button instead of a div

Solution

1. Step 1: Check how props are used inside the component

   The component uses {message} but does not extract it from props.

2. Step 2: Identify the error

   Since message is not defined or extracted, this causes a reference error.

3. Final Answer:

   The variable 'message' is not defined inside the component -> Option A

4. Quick Check:

   Props must be accessed via props or destructuring [OK]

Hint: Always get props from function parameter before use [OK]

Common Mistakes:

• Using prop names directly without props or destructuring
• Assuming usage syntax is wrong
• Thinking component must return button

5. You want to create a reusable Input component that can show a label and accept user input. Which approach correctly allows customizing the label text and input placeholder using props?

hard

A. function Input() {
return (
<label>
label
<input placeholder="placeholder" />
</label>
);
}

B. function Input({ label, placeholder }) {
return (
<label>
{label}
<input placeholder={placeholder} />
</label>
);
}

C. function Input(props) {
return (
<label>
props.label
<input placeholder="props.placeholder" />
</label>
);
}

D. function Input({ label, placeholder }) {
return (
<label>
<input placeholder={label} />
{placeholder}
</label>
);
}

Solution

1. Step 1: Check prop usage for label and placeholder

   Props should be destructured and used inside JSX expressions with curly braces.

2. Step 2: Verify correct placement of label and placeholder

   function Input({ label, placeholder }) { return ( <label> {label} <input placeholder={placeholder} /> </label> ); } correctly places label text and uses placeholder prop inside input element.

3. Final Answer:

   function Input({ label, placeholder }) { return ( <label> {label} <input placeholder={placeholder} /> </label> ); } -> Option B

4. Quick Check:

   Destructure props and use inside JSX with curly braces [OK]

Hint: Destructure props and use inside JSX with curly braces [OK]

Common Mistakes:

• Using prop names as plain text instead of expressions
• Putting placeholder text in wrong prop
• Mixing label and placeholder positions