Components

Components are the fundamental building blocks of every React application. A component is a self-contained piece of UI that accepts inputs (props), manages its own state, and returns JSX describing what should appear on screen.

Functional Components

Functional components are plain JavaScript functions that take a props object and return JSX. They are the modern standard for writing React components.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Before hooks (React 16.8), functional components were "stateless" — they could only receive props and render UI. Hooks (useState, useEffect, useRef, etc.) gave functional components the ability to manage state, run side effects, and access all features previously exclusive to class components.

Class Components

Class components are ES6 classes that extend React.Component and must implement a render() method. They have lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount) for handling side effects and a this.state/this.setState() API for state management.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Class components are more verbose, require understanding of this binding (a common source of bugs), and make it harder to reuse stateful logic between components.

Why Functional Components Won

Hooks solved the three main problems with class components:

1. Reusing stateful logic: Class patterns (HOCs, render props) wrapped components in layers of abstraction. Custom hooks extract and share logic with simple function calls.
2. Complex components: Lifecycle methods forced related logic to be split across different methods (componentDidMount + componentWillUnmount for the same subscription). useEffect keeps related logic together.
3. this binding confusion: Class methods need explicit binding (this.handleClick = this.handleClick.bind(this) in the constructor). Functional components have no this.

Functional components are shorter, easier to read, easier to test, and compose better.

When Class Components Are Still Needed

Error boundaries require class components — they use static getDerivedStateFromError() and componentDidCatch(), which have no hook equivalents. For everything else, functional components with hooks are preferred. Libraries like react-error-boundary provide a wrapper so you rarely need to write class components yourself.

Component Composition

React components compose together through several patterns:

• children prop: Pass nested JSX between component tags. <Card><p>Content</p></Card> — Card receives the paragraph as props.children.
• Props as configuration: Pass data and callbacks to customize component behavior.
• Composition over inheritance: React recommends composing components together rather than using inheritance. You never need to create component subclasses.

Pure Components

A pure component always renders the same output for the same props and state — no side effects during rendering. React can optimize pure components by skipping re-renders when props haven't changed (using React.memo for functional components).

Key Interview Distinction

Functional components are functions that return JSX and use hooks for state and effects. Class components are ES6 classes with lifecycle methods. Functional components are the modern standard — class components are only needed for error boundaries. Component composition (via children and props) is preferred over inheritance.