Complete Overview of React Functional Components

A React functional component is a straight JavaScript function that takes props and returns a React element. Functional components have become the standard way to write React components ever since React Hooks arrived — and with React 19 and features like Server Components, concurrent rendering, and Suspense being built for functions rather than classes, they are now the only style the React team actively recommends.

A React component's primary job is to describe a piece of the UI and connect it to the logic that controls its behavior. Functional components reduce this to the simplest possible shape: a function that accepts properties and returns a JSX definition. The function body holds everything the component needs, and the boilerplate that classes require (constructors, this binding, lifecycle methods) simply disappears.

What is a React functional component?

A functional component is any JavaScript function that returns valid JSX (or null). It receives its inputs through a single props argument and produces output that React renders to the DOM. Compared with class components, functional components are lighter, easier to read, and easier to test — there is no class instance, no this keyword, and no lifecycle method soup to reason about.

Two ways to declare one:

// Function declaration
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Arrow function (equally valid, common in modern codebases)
const Welcome = (props) => <h1>Hello, {props.name}</h1>;

export default Welcome;

How do you create a functional component?

A functional component is easy to define — it is just a function that returns a valid React element. To spin up a fresh project, use Vite. Note that create-react-app was officially deprecated by the React team in February 2025; new projects should use Vite, a framework such as Next.js, or another modern build tool.

npm create vite@latest react-functional-component -- --template react
cd react-functional-component
npm install
npm run dev

Open src/App.jsx and replace it with a minimal functional component:

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>My First Functional Component</h1>
    </div>
  );
}

export default App;

This is a very basic functional component that renders static text on the screen. You can write the exact same thing with an ES6 arrow function if you prefer.

How do functional components use props?

Functional components in React are pure JavaScript functions. Each one takes a single object argument called props (short for "properties") and returns JSX. Props are how a parent passes data down to a child, and they are read-only inside the receiving component.

By convention, components live in a src/components folder. Create src/components/Person.jsx:

// src/components/Person.jsx

const Person = (props) => {
  return (
    <div className="person">
      <h2>Name: {props.name}</h2>
      <h2>Age: {props.age}</h2>
    </div>
  );
};

export default Person;

Then use it from App.jsx:

// src/App.jsx

import './App.css';
import Person from './components/Person';

function App() {
  return (
    <div className="App">
      <Person name="David" age={20} />
    </div>
  );
}

export default App;

Here we render the Person component from App and pass its data as attributes. The Person component receives that data as props — an object with name and age fields — and can use it anywhere in its JSX. A cleaner variant is to destructure the props directly in the parameter list: const Person = ({ name, age }) => ( ... ).

How do you handle events (onClick and onChange)?

React attaches event handlers directly in JSX using camelCase attributes like onClick and onChange. You pass a function reference, and React calls it when the event fires.

Here is an onClick handler:

// src/App.jsx

import './App.css';

function App() {
  const clickHandler = () => {
    alert('You are learning the onClick event');
  };

  return (
    <div className="alert">
      <button className="btn" onClick={clickHandler}>
        Show Alert
      </button>
    </div>
  );
}

export default App;

The code renders a button labeled "Show Alert" that calls clickHandler when pressed, opening the alert popup. Note that you pass onClick={clickHandler}, not onClick={clickHandler()} — the latter would call the function during render instead of on click.

The onChange handler is passed to input elements and is how React manages user input in real time. It runs on every keystroke, so it is essential for controlled inputs:

// src/App.jsx

import './App.css';

function App() {
  const onChangeHandler = (e) => {
    console.log(e.target.value);
  };

  return (
    <div className="App">
      <input type="text" onChange={onChangeHandler} />
    </div>
  );
}

export default App;

The onChange handler receives a synthetic event object with useful metadata about the input — its id, name, and current value. You read the typed text with e.target.value, and you can read the field's name with e.target.name, which is handy when one handler serves several inputs.

What are React Hooks?

React Hooks are functions that let you use React's state and lifecycle features from inside functional components. They removed the last reason to reach for a class: with hooks, a plain function can hold state, run side effects, share logic, and more.

useState — managing state

The useState hook gives a component a piece of state and a function to update it. Calling the updater re-renders the component with the new value:

// src/App.jsx

import { useState } from 'react';
import './App.css';

function App() {
  const [counter, setCounter] = useState(0);

  const clickHandler = () => {
    setCounter(counter + 1);
  };

  return (
    <div className="App">
      <div>Counter Value: {counter}</div>
      <button onClick={clickHandler}>Increase Counter</button>
    </div>
  );
}

export default App;

We declare a counter state variable initialized to 0. The "Increase Counter" button raises the value by one via setCounter, and updating state re-renders the component so the new value shows on screen. State can be a string, number, array, object, or boolean — whereas props is always an object passed in from the parent.

useEffect — running side effects

The useEffect hook runs side effects (data fetching, subscriptions, timers, manual DOM work) after render. Its second argument is a dependency array that controls when it re-runs. Here we reset the counter whenever a separate toggle changes:

// src/App.jsx

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [counter, setCounter] = useState(0);
  const [resetCounter, setResetCounter] = useState(false);

  const clickHandler = () => setCounter(counter + 1);
  const resetHandler = () => setResetCounter(!resetCounter);

  useEffect(() => {
    if (counter > 0) {
      setCounter(0);
    }
  }, [resetCounter]);

  return (
    <div className="App">
      <div>Counter Value: {counter}</div>
      <button onClick={clickHandler}>Increase Counter</button>
      <button onClick={resetHandler}>Reset Counter</button>
    </div>
  );
}

export default App;

The resetHandler flips the resetCounter boolean. Because resetCounter is in the dependency array, changing it re-runs the effect, which sets the counter back to 0. Effects with an empty dependency array ([]) run once after the first render, which is the modern replacement for componentDidMount.

Functional vs class components: which should you use?

For all new code, use functional components. The React documentation now leads with them, and the ecosystem's newest features are built for them. Class components still work and appear in older codebases, so it is worth recognizing the difference, but there is no reason to write new ones.

• Syntax: functional components are plain functions; class components extend React.Component and use a render() method.
• State & lifecycle: functional components use hooks (useState, useEffect); classes use this.state and lifecycle methods.
• Boilerplate: functional components skip constructors, this binding, and lifecycle wiring.
• Reuse: shared logic lives in custom hooks (functions) rather than higher-order components or render props.

What are the best practices for functional components?

• Keep components small and focused. One component, one responsibility. Extract sub-views when a component grows past a screenful.
• Destructure props in the parameter list for readability: ({ name, age }) => ....
• Pull reusable stateful logic into custom hooks such as useForm, useFetch, or useAuth — this is the primary reuse pattern in modern React.
• Optimize deliberately. Reach for React.memo, useMemo, and useCallback only where profiling shows a real cost; premature memoization adds noise.
• Respect the rules of hooks. Call hooks at the top level, never inside conditions or loops, and only from React functions.

Functional components are the foundation of every modern React codebase, from a single side project to a large product team. If you are scaling a React application and need experienced engineers, Codersera can help you extend your team with vetted remote React developers.

FAQ

What is a React functional component?

It is a JavaScript function that accepts a props object and returns JSX describing part of the UI. With React Hooks, it can also manage state and side effects, so it fully replaces class components for new code.

Are functional components better than class components?

For new code, yes. They need less boilerplate, are easier to read and test, and are the style the React team recommends. React's newest features — Server Components, concurrent rendering, Suspense — are designed for functional components.

Can functional components have state?

Yes. The useState hook adds state to a functional component, and useReducer handles more complex state logic. Before hooks (React 16.8), only class components could hold state.

What does the clickHandler function do?

clickHandler is the function you pass to a button's onClick prop. React calls it when the button is clicked — in the example above it opens an alert. You pass the reference (onClick={clickHandler}), not a call.

How does useEffect differ from lifecycle methods?

useEffect runs after render and re-runs based on its dependency array. An empty array ([]) mimics componentDidMount; listed dependencies mimic componentDidUpdate; a returned cleanup function mimics componentWillUnmount — all in one API.

Do I still need Create React App?

No. Create React App was deprecated in February 2025. Start new projects with Vite (npm create vite@latest), a framework like Next.js, or another modern build tool for faster startup and up-to-date defaults.