Functional Components in React

Introduction

Functional Components are the most commonly used in modern React development.

Functional Components are simple JavaScript functions that return JSX. They help developers create reusable and maintainable UI elements easily. With the introduction of React Hooks, functional components became more powerful and replaced class components in most modern applications.

Today, most React developers prefer functional components because they are:

• Simpler
• Faster to write
• Easier to understand
• Easier to maintain

In this tutorial, you will learn what functional components are, why they are used, syntax, examples, real-life use cases, advantages, common mistakes, interview questions, and best practices.

What are Functional Components in React?

Functional Components are JavaScript functions that return JSX to display UI elements in React applications.

These components are called functional because they are created using JavaScript functions.

Simple Definition

A functional component:

• Accepts data through props
• Returns JSX
• Creates reusable UI

Syntax of Functional Component

Basic syntax:

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

Example of Functional Component

function App() {
 return (
   <div>
     <h1>Hello React</h1>
     <p>This is a functional component.</p>
   </div>
 );
}
export default App;

Output

Why Functional Components are Used

Functional components are used because they:

• Simplify code
• Improve readability
• Reduce boilerplate code
• Support React Hooks
• Improve maintainability

Modern React applications mainly use functional components.

Features of Functional Components

1. Simple Syntax

Functional components use plain JavaScript functions.

2. Reusable

One component can be reused multiple times.

3. Supports Hooks

Hooks like:

• useState
• useEffect
• useContext

work inside functional components.

4. Better Readability

Functional components are easier to understand compared to class components.

5. Faster Development

Less code means faster development.

How Functional Components Work

A functional component:

1. Receives props
2. Processes data
3. Returns JSX
4. React renders the UI

Functional Component with Props

Props allow data to be passed from a parent component to a child component.

Example

function User(props) {
 return <h1>Hello {props.name}</h1>;
}
function App() {
 return <User name="Gaurav" />;
}

Output

Functional Components with Arrow Functions

Functional components can also be created using arrow functions.

Syntax

const Welcome = () => {
 return <h1>Welcome User</h1>;
};

Example

const App = () => {
 return (
   <div>
     <h1>Arrow Function Component</h1>
   </div>
 );
};
export default App;

Output

Functional Components with Hooks

React Hooks allow functional components to manage:

• State
• Side effects
• Context
• References

Example using useState

import { useState } from "react";
Counter() {
 const [count, setCount] = useState(0);
 return (
   <button onClick={() => setCount(count + 1)}>
     Count: {count}
   </button>
 );
}
export default Counter;

Output

Functional Component with useEffect

useEffect handles side effects.

Example

import { useEffect } from "react";
function App() {
 useEffect(() => {
   console.log("Component Loaded");
 }, []);
 return <h1>React useEffect</h1>;
}

Real-Life Example of Functional Components

Suppose you are building an e-commerce website.

Possible functional components:

• Navbar
• Product Card
• Shopping Cart
• Login Form
• Footer

Each component can be reused across multiple pages.

Example of Product Card Component

function ProductCard() {
 return (
   <div>
     <h2>Smartphone</h2>
     <p>Price: ₹20,000</p>
   </div>
 );
}

Reusing Functional Components

One component can be rendered multiple times.

Example

function Button() {
 return <button>Buy Now</button>;
}
function App() {
 return (
   <div>
     <Button />
     <Button />
     <Button />
   </div>
 );
}

Output

Functional Components vs Class Components

Advantages of Functional Components

1. Easier to Learn

Functional components are beginner-friendly.

2. Less Boilerplate Code

No need for:

• constructor
• render()
• this keyword

3. Better Performance

Functional components are lightweight.

4. Hooks Support

Hooks make functional components powerful.

5. Cleaner Code

Code becomes easier to maintain.

Disadvantages of Functional Components

1. Hooks Complexity

Advanced hooks may confuse beginners.

2. Too Many Hooks

Excessive hooks can make code difficult to manage.

Functional Components Best Practices

• Keep components small
• Use meaningful names
• Use Hooks properly
• Avoid unnecessary re-renders
• Separate logic into custom hooks
• Organize files properly

Folder Structure Example

src/
├── components/
│    ├── Header.jsx
│    ├── Footer.jsx
│    └── ProductCard.jsx

Common Mistakes in Functional Components

1. Component Name Starting with Lowercase

Wrong:

function button() {
 return <button>Click</button>;
}

Correct:

function Button() {
 return <button>Click</button>;
}

2. Forgetting Return Statement

Wrong:

function App() {
 <h1>Hello</h1>;
}

Correct:

function App() {
 return <h1>Hello</h1>;
}

3. Returning Multiple Elements Without Parent

Wrong:

return (
 <h1>Hello</h1>
 <p>World</p>
);

Correct:

return (
 <div>
   <h1>Hello</h1>
   <p>World</p>
 </div>
);

4. Incorrect Hook Usage

Hooks must be called:

• Inside functional components
• At the top level

Wrong:

if (true) {
 useState();
}

5. Overcomplicated Components

Large components become difficult to manage.

Split them into smaller components.

Real-World Applications of Functional Components

Functional components are used in:

• Dashboards
• Social Media Apps
• E-commerce Websites
• Blogging Platforms
• Chat Applications
• Admin Panels

Almost every modern React application uses functional components extensively.

Functional Components – Interview Questions

Reactjs Function Component – Objective Questions (MCQs)

Conclusion

Functional Components are the modern and recommended way of building React applications. They provide a cleaner syntax, better readability, and support powerful features like React Hooks.

Because they are simple, reusable, and easier to maintain, functional components have become the standard approach in modern React development.

Continue Learning React