REACT Functional Components

Functional components are one of the core building blocks of React applications. They are simple JavaScript functions that return React elements to define the UI.

1. What Are Functional Components?

A functional component is a plain JavaScript function that:

  • Accepts props as an argument.
  • Returns a React element (usually using JSX).

Functional components are preferred for their simplicity, readability, and compatibility with React Hooks.

2. Syntax of Functional Components

Basic Functional Component

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

export default Welcome;

Functional Component with Props

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

// Usage
<Greeting name="John" />;

3. Key Characteristics

  1. Simpler Structure: Functional components are just functions without the complexity of class syntax.
  2. No this Keyword: Unlike class components, functional components don’t use this, making them easier to understand.
  3. Hooks Support: Functional components can manage state and lifecycle methods using React Hooks like useState and useEffect.

4. Advantages of Functional Components

  • Easier to write and understand.
  • Encourage the use of modern JavaScript features like arrow functions and destructuring.
  • Improved performance due to the absence of lifecycle overhead (compared to older class components).
  • Fully compatible with React’s features like Hooks and Context API.

5. Props in Functional Components

Props are passed as an argument to the functional component and used to render dynamic content.

Example:

function ProfileCard(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>{props.description}</p>
        </div>
    );
}

// Usage
<ProfileCard name="John Doe" description="React Developer" />;

6. React Hooks in Functional Components

React Hooks enable functional components to handle state and lifecycle features.

Using useState Hook

The useState Hook allows you to add state to functional components.

import React, { useState } from 'react';

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

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

Using useEffect Hook

The useEffect Hook handles side effects like API calls or updating the DOM.

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

function Timer() {
    const [time, setTime] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setTime((prevTime) => prevTime + 1);
        }, 1000);

        return () => clearInterval(interval); // Cleanup
    }, []);

    return <p>Time: {time} seconds</p>;
}

7. Passing and Destructuring Props

Props can be destructured for cleaner and more readable code.

Without Destructuring

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

With Destructuring

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

8. Reusable Functional Components

Functional components can be designed to be reusable and customizable using props.

Example: Button Component

function Button({ label, onClick }) {
    return <button onClick={onClick}>{label}</button>;
}

// Usage
<Button label="Click Me" onClick={() => alert('Button Clicked!')} />;

9. Nested Functional Components

You can combine functional components by nesting them.

Example:

function Header() {
    return <h1>React Application</h1>;
}

function Footer() {
    return <p>© 2025 React Tutorial</p>;
}

function App() {
    return (
        <div>
            <Header />
            <p>Welcome to the React tutorial!</p>
            <Footer />
        </div>
    );
}

export default App;

10. Comparison with Class Components

Feature Functional Components Class Components
Syntax Simple functions ES6 classes
State Management useState Hook this.state
Lifecycle Methods useEffect Hook Explicit methods (componentDidMount, etc.)
Performance Faster due to less overhead Slightly slower due to lifecycle management
Code Complexity Minimal More boilerplate

11. Best Practices for Functional Components

  1. Use arrow functions for consistency.
  2. Prefer destructuring props for cleaner code.
  3. Split large components into smaller, reusable components.
  4. Use React Hooks for state management and lifecycle events.
  5. Follow the “one component per file” rule for better organization.

12. Example: Functional Component with All Features

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

function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
        return () => {
            console.log('Cleanup on unmount or dependency change');
        };
    }, [count]);

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

export default App;

Key Points to Remember

  • Functional components are lightweight and focus on a single responsibility.
  • Use React Hooks (useState, useEffect, etc.) to add advanced functionality.
  • Props are used to pass data and behavior between components.
  • Destructure props for cleaner code.
  • Always aim for reusable and modular components.

Functional components, coupled with Hooks, have become the standard for building modern React applications.