Functional Components in React
If React components are the Lego blocks of your UI, then **functional components** are the simplest, most popular type of Lego block – easy to create, understand, and use. They are the modern way to write React components and are recommended for most situations.
What is a Functional Component?
A functional component is literally just a JavaScript function. It accepts a single argument – an object of `props` – and returns JSX that describes what should be rendered on the screen.
Before React 16.8, functional components were also called 'stateless' or 'presentational' components because they couldn't manage state or lifecycle. But after Hooks were introduced, functional components can do everything class components can do, and more!
Basic Syntax
function Greeting() { return <h1>Hello, World!</h1>;}That's it! This is a complete, working React component. You can use it anywhere like this: ``.
Functional Components with Props
To make components dynamic, you can pass them data using `props`. In a functional component, props are received as the first argument.
function Greeting(props) { return <h1>Hello, {props.name}!</h1>;}
function App() { return <Greeting name="Alice" />;}Using Hooks in Functional Components
Functional components can use React Hooks to add state and other features. The most common hook is `useState`.
import React, { useState } from 'react';
function Counter() { const [count, setCount] = useState(0);
function increment() { setCount(count + 1); }
return ( <div> <p>You clicked {count} times</p> <button onClick={increment}>Click me</button> </div> );}Advantages of Functional Components
- Simplicity: They are just functions – easier to read and write.
- Less Code: No need for `this` binding, no `render()` method, just a return statement.
- Hooks: They can use all React features (state, effects, context) with hooks.
- Performance: Slightly lighter than class components (though difference is often negligible).
- Future-Proof: React team is focusing on functional components and hooks for future features.
Two Minute Drill
- Functional components are plain JavaScript functions that return JSX.
- They accept an optional `props` object as argument for passing data.
- With React Hooks (useState, useEffect, etc.), functional components can manage state and side effects.
- They are the modern, recommended way to write React components.
- Advantages: simpler, less code, no `this` binding, and full access to React features via hooks.
- Component names must start with a capital letter.
Need more clarification?
Drop us an email at career@quipoinfotech.com