Functional Components in React

Analogy categoryAnalogies

Introduction

Functional components are plain JavaScript functions that accept a props object and return JSX describing what should appear on screen. Since the introduction of Hooks in React 16.8, functional components have become the recommended way to build React applications, replacing most use cases for class components with simpler, more concise syntax.

🏏

Cricket analogy: A functional component is like a specialist net-bowler brought in for one task — given the batter's stance (props) and asked to bowl a line, returning a delivery (JSX); since modern bowling machines (Hooks) arrived, teams rely on these specialists instead of the older, bulkier all-rounder setup (class components).

Syntax

jsx

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Equivalent arrow function version
const Welcome = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Explanation

A functional component receives props as its single argument and must return JSX (or null). Because they are ordinary functions, they support destructuring props directly in the parameter list, which improves readability. Functional components can manage internal state and side effects using Hooks like useState and useEffect, giving them the same capabilities that previously required class components, without the overhead of 'this' binding or lifecycle method boilerplate.

🏏

Cricket analogy: A player-analysis function takes the match context as its single argument and must return a stat breakdown or null if no data exists, destructuring { venue, opponent } directly in the signature; it tracks its own form with useState and logs post-match effects with useEffect, skipping the bulky class-based ledger.

Example

jsx

import { useState } from "react";

function Counter({ initialValue = 0 }) {
  const [count, setCount] = useState(initialValue);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Output

The Counter component renders the current count and a button. Each click calls setCount, which updates the component's internal state and triggers a re-render showing the new count value. This demonstrates how functional components use Hooks to hold and update state without needing a class or constructor.

🏏

Cricket analogy: A RunTally component renders the current score and an 'Add Run' button; each tap calls setRuns, updating internal state and triggering a re-render showing the new total, demonstrating how a functional component holds and updates the score without a scorer's constructor-based ledger class.

Functional components paired with Hooks are now the official recommended approach for new React code, as stated in the React documentation. Class components remain fully supported but are considered legacy for new development.

Key Takeaways

Functional components are plain JavaScript functions that accept props and return JSX.
They can manage state and side effects using Hooks such as useState and useEffect.
Destructuring props in the function signature improves readability.
Functional components avoid 'this' binding issues common in class components.
They are the officially recommended default for building new React components.