React Component Design Interview Guide

What is a React Component?

A React component is a reusable piece of UI that encapsulates its own structure, logic, and styling.

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

Senior-Level Perspective

A component is the fundamental building block of React applications. It promotes reusability, maintainability, and separation of concerns by encapsulating UI and behavior into independent units.

Types of React Components

Functional Components

function Welcome() {
  return <h1>Hello</h1>;
}

Class Components

class Welcome extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}

Modern React primarily uses functional components with Hooks because they are simpler and provide all lifecycle capabilities.

Characteristics of Good Component Design

A well-designed component should be:

Reusable
Single Responsibility
Maintainable
Testable
Scalable

Example

Bad

UserDashboard

Handles:

API calls
Rendering
Validation
Business logic

Good

flowchart TD
    A[UserDashboard] --> B[UserProfile]
    A --> C[UserStats]
    A --> D[UserActions]

Each component has one responsibility.

Single Responsibility Principle (SRP)

A component should have only one reason to change.

Bad

function UserComponent() {
  // fetch user
  // display user
  // update user
}

Good

UserList
UserDetails
UserForm

Applying SRP improves reusability, testing, and reduces coupling.

When Should You Create a New Component?

Create a new component when:

UI repeats
Logic repeats
Component becomes large
Reusability is needed

Instead of:

<Card1 />
<Card2 />
<Card3 />

Use:

<Card title="A" />
<Card title="B" />
<Card title="C" />

Smart vs Dumb Components

Smart (Container)

API calls
State management
Business logic

Dumb (Presentational)

UI rendering only

flowchart TD
    A[UserContainer] --> B[UserCard]

Prop Drilling

Passing props through multiple levels.

flowchart TD
    A[App] --> B[Parent]
    B --> C[Child]
    C --> D[GrandChild]

Example:

<App user={user} />

Solutions:

Context API
Redux
Zustand

Designing Reusable Components

Use configurable props.

<Button text="Save" variant="primary" />

Avoid hardcoding.

<button>{text}</button>

Component Composition

Composition combines smaller components into larger ones.

<Card>
  <Header />
  <Body />
  <Footer />
</Card>

Benefits:

Reusability
Flexibility
Maintainability

Composition vs Inheritance

React recommends composition over inheritance.

<Card>
  <UserProfile />
</Card>

Children Prop

function Card({ children }) {
  return <div>{children}</div>;
}

Usage:

<Card>
  <h1>Hello</h1>
</Card>

Designing Scalable Forms

Separate concerns:

UserForm
- FormFields
- Validation
- API Service

Recommended libraries:

React Hook Form
Formik

Use custom hooks.

function useFetch(url) {
  // fetch logic
}

const data = useFetch("/users");

Avoiding Unnecessary Re-renders

React.memo

const UserCard = React.memo(({ user }) => {
  return <div>{user.name}</div>;
});

useMemo

const result = useMemo(() => expensiveCalc(), []);

useCallback

const handleClick = useCallback(() => {}, []);

Structuring a Large React Application

Traditional:

src
- components
- pages
- hooks
- services
- contexts
- utils
- store
- routes

Feature-based:

features
- users
  - components
  - hooks
  - api
  - pages
- products
- orders

Controlled vs Uncontrolled Components

Component design decisions around forms often come back to this distinction. See the React Interview Study Guide for the controlled vs uncontrolled comparison and code examples.

<Modal
  isOpen={isOpen}
  onClose={closeModal}
>
  <UserForm />
</Modal>

Design considerations:

Accept children
Configurable props
Independent state
Reusable

Designing a Reusable Table

<Table
  data={users}
  columns={columns}
/>

const columns = [
  { key: "name", title: "Name" },
  { key: "email", title: "Email" }
];