Functional Components

Learning objectives#

• Write function components with function and arrow syntax
• Compare them with class components
• Map class lifecycle and state to hooks
• Know the naming and export conventions

Explanation#

A function component takes props and returns JSX. Hooks (useState, useEffect…) give it state and side effects.

Class components (class Counter extends React.Component) use this.props, this.state, this.setState and lifecycle methods such as componentDidMount. They still work but are no longer recommended for new code.

Functions are shorter, have no this binding problems, and let you reuse logic with custom hooks instead of higher-order components or mixins.

Two syntaxes: function Card(props) { ... } or const Card = (props) => { ... }. Both are fine; function declarations hoist and show their name in DevTools.

Error boundaries are the one feature that still requires a class component (or a library like react-error-boundary).

Syntax#

1// function declaration
2export default function Card({ title }) { return <h2>{title}</h2>; }
3

4// arrow function
5export const Badge = ({ text }) => <span>{text}</span>;

Code example: The same counter as a class and as a function#

1import { Component, useState } from 'react';
2

3// Older style: class component
4class ClassCounter extends Component {
5  state = { count: 0 };
6

7  increment = () => {
8    this.setState(prev => ({ count: prev.count + 1 }));
9  };
10

11  render() {
12    return <button onClick={this.increment}>Class: {this.state.count}</button>;
13  }
14}
15

16// Modern style: function component with a hook
17function FunctionCounter() {
18  const [count, setCount] = useState(0);
19  return <button onClick={() => setCount(c => c + 1)}>Function: {count}</button>;
20}
21

22export default function Counters() {
23  return (
24    <>
25      <ClassCounter />
26      <FunctionCounter />
27    </>
28  );
29}

Two buttons, “Class: 0” and “Function: 0”. Each counts its own clicks independently. Both behave the same; the function version is about half the code.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. ClassCounter stores state in this.state and changes it with this.setState.
2. increment is an arrow class field so that this stays bound to the instance.
3. render() returns the JSX.
4. FunctionCounter gets the same behaviour from useState in three lines.

Real-world use case#

Common mistakes#

Best practices#

• Write new components as functions
• Name components clearly (PascalCase)
• Keep one default export per file
• Use react-error-boundary instead of writing class boundaries

Remember this#

Practice exercise#

1export default function Hello({ name = 'Asha' }) {
2  return <p>Hello {name}</p>;
3}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.