ReactJS Functional Components

Functional Components are the modern, recommended way to build UI in React. They are simple, lightweight, easier to read, and form the foundation for React Hooks (feature introduced in React 16.8) — the features that transformed how developers manage state, side effects, and logic inside components.

What is a Functional Component in React?

A Functional Component is a plain JavaScript function that returns JSX.
JSX looks like HTML but works inside JavaScript to build UI structure.

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

It’s that simple—no constructors, no lifecycle methods, no binding.
Just a clean function that returns UI.

Structure of a Functional Component

• Is written as a function
• Uses capitalized naming (React rule)
• Returns JSX markup

function Greeting() {
  return (
    <div>
      <h2>Hello User</h2>
      <p>This is a simple functional component.</p>
    </div>
  );
}

Functional Component with Internal Logic

Functional components can contain JavaScript logic inside them. These logics can be anything like - Mathematical Calculations, updating the data from API call, Calculations/Displaying time

function CurrentTime() {
  const now = new Date().toLocaleTimeString();

  return (
    <div>
      <h3>Current Time</h3>
      <p>{now}</p>
    </div>
  );
}

• Calculates current time
• Displays it on the screen
• Does not depend on any props

Using Hooks Inside Functional Components

One of the biggest advantages of functional components is the ability to use React Hooks.

import { useState } from "react";

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

  return (
    <div>
      <h2>Counter Example</h2>
      <p>Value: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

• useState inside a functional component
• How UI updates automatically when state changes

Full Example With Multiple Functional Components

import React from "react";
import ReactDOM from "react-dom/client";

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

function InfoSection() {
  return (
    <div>
      <h3>About This App</h3>
      <p>This app demonstrates how functional components work in React.</p>
    </div>
  );
}

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

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(<App />);

Final Thoughts

Functional components have grown from a simple way to return JSX into the main building block of modern React. With the introduction of Hooks in 2018, they became more powerful than class components, supporting state, side effects, and reusable logic—all with cleaner syntax.

• Beginner-friendly
• Fast and efficient
• Ideal for building scalable UI
• The recommended way to create components in React