What are Functional Components in React?

This article provides a clear and straightforward guide to functional components in React. You will learn what functional components are, how they differ from traditional class components, how to write them, and how React Hooks allow them to manage state and lifecycle events.

Understanding Functional Components

In React, a functional component is simply a JavaScript function that returns a React element (JSX). It is the modern standard for building user interfaces in React. Unlike class components, which require ES6 class syntax and extending from React.Component, functional components are much simpler to write, read, and test.

Historically, functional components were called “stateless components” because they could not manage their own state or use lifecycle methods. However, with the introduction of React Hooks in version 16.8, functional components gained the ability to handle state, side effects, and other React features, making class components largely obsolete.

Syntax and Example

Writing a functional component is as simple as writing a standard JavaScript function or an arrow function.

Here is a basic example of a functional component:

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to learning React!</h1>;
}

export default WelcomeMessage;

You can also write the same component using ES6 arrow function syntax:

const WelcomeMessage = () => {
  return <h1>Welcome to learning React!</h1>;
};

Handling Props

Functional components accept a single argument called props (properties), which is an object containing data passed down from a parent component.

Here is how you receive and use props in a functional component:

const UserProfile = (props) => {
  return (
    <div>
      <h2>User: {props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
};

You can also use JavaScript destructuring to make the code cleaner:

const UserProfile = ({ name, age }) => {
  return (
    <div>
      <h2>User: {name}</h2>
      <p>Age: {age}</p>
    </div>
  );
};

State and Lifecycle with Hooks

With React Hooks, functional components can perform all the tasks that previously required class components. The two most commonly used hooks are:

Here is an example of a functional component using both state and a side effect:

import React, { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  // Updates the document title whenever the count changes
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

Why Use Functional Components?

Functional components are preferred in modern React development for several key reasons: