What is functional component in React?

Article

A JavaScript function that returns JSX. Read more about jsx

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

This Hello Function is a functional component that returns the UI.

It's a function, so it takes props as input, returns JSX.
Stateless (originally), but since React 16.8, you can use hooks (like useState, useEffect) to manage state and side effects.

Example with Props

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

Usage

<Greeting name="Alice" />

Example with Hooks

import { useState } from "react";
function Counter() {
 const [count, setCount] = useState(0);
 
 return (
 <div>
 <p> Total-Count: {count} </p>
 <button onClick={() => setCount(count + 1)}>Click me</button>
 </div>
 );
}

Various ways to write a functional component

1. Regular function declaration: The one we saw above.

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

2. Arrow function expression

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

Arrow function with implicit return

If your component just returns JSX (no extra logic), you can make it a one-liner

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

4. Destructuring props directly in the parameter

Instead of doing props.nameYou can unpack props in the signature

function Greeting({ name, age }) {
 return <p>{name} is {age} years old</p>;
}

5. With React.FC (TypeScript only)

You can define component types using React.FC (or React.FunctionComponent)

import React from 'react';
const Greeting: React.FC<{ name: string }> = ({ name }) => {
 return <h1>Hello, {name}!</h1>;
};

A single React file can contain multiple functional components

// Card.jsx
function Card({ title, children }) {
 return (
 <div className="card">
 <CardHeader title={title} />
 <CardBody>{children}</CardBody>
 </div>
 );
}
function CardHeader({ title }) {
 return <h2>{title}</h2>;
}
function CardBody({ children }) {
 return <div>{children}</div>;
}
export default Card;

When to Keep Multiple Components in One File

They’re small and only used inside that file
They help structure your JSX (like subcomponents)
It keeps your code more readable

When to Split Into Separate Files

It’s large
It’s reused across multiple places
It has complex logic (state, effects, etc.)

1. One file can define multiple functional components (just like we saw earlier)

// Components.jsx
export function Header() {
 return <h1>Hello!</h1>;
}
export function Footer() {
 return <p>© 2025 MyApp</p>;
}

2. How to import them in another file - Named import

// App.jsx
import { Header, Footer } from './Components';
function App() {
 return (
 <div>
 <Header />
 <Footer />
 </div>
 );
}
export default App;

3. What if you have one default export too?

You can have one default export and also named exports in the same file.

// Components.jsx
export default function Header() {
 return <h1>Hello!</h1>;
}
export function Footer() {
 return <p>© 2025 MyApp</p>;
}

Then you can import like this

import Header, { Footer } from './Components';

Or even rename it : Default exports can be named anything on import

import MyAppHeader, { Footer } from './Components';

Named exports must match the original name unless you explicitly rename them

import MyAppHeader, { Footer as MyFooter } from './Components';

4. What you cannot do

A React component (i.e., a function) can only return one root element but that element can contain multiple children.

Invalid

function App() {
 return <Header />;
 return <Footer />; // ❌ Only first return runs
}

Valid

function App() {
 return (
 <>
 <Header />
 <Footer />
 </>
 );
}

Here, the <>...</> is a React Fragment, allowing multiple JSX elements under one root.