React Tutorial 0/120 lessons ~6 min read Lesson 17“Modern frontend engineering”

Functional Components

Functional Components explains modern React function components, JSX returns, props, state, Hooks, events, composition, exports, purity, accessibility, testing, and class-component differences.

Course progress0%

Focus

65 guided sections

Practice signal

Examples included

Career prep

Interview Q&A included

Functional Components

Functional Components are the modern and standard way to create components in React.

A functional component is essentially a JavaScript function that returns React UI.

Learning Objectives

By the end of this lesson, you will understand:

What a functional component is
How to create one
How React renders a functional component
Component naming rules
Returning JSX
Using JavaScript inside components
Passing props to functional components
Using state inside functional components
Handling events
Composing functional components
Exporting and importing components
Common mistakes
Functional vs class components
Functional component best practices

What Is a Functional Component?

The simplest definition is:

A functional component is a JavaScript function that returns React UI.

Example:

jsx

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

That's a functional component.

The important relationship is:

text

JavaScript Function
       ↓
Returns JSX
       ↓
React UI

Your First Functional Component

jsx

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

Let's break it down:

text

function
   ↓
Greeting
   ↓
()
   ↓
{
   return JSX
}

Greeting is the component.

Rendering the Component

Creating a component doesn't automatically display it.

You need to use it:

jsx

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

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

The flow is:

text

App
 ↓
Greeting
 ↓
<h1>Hello, React!</h1>

Component vs Function

Every functional component is a JavaScript function, but not every JavaScript function is a React component.

Regular function:

javascript

function add(a, b) {
  return a + b;
}

Functional component:

jsx

function Header() {
  return <header>My Website</header>;
}

The key difference is that the component participates in React's rendering model and returns UI.

Component Naming

Functional components should normally use PascalCase.

Correct:

jsx

function Header() {
  return <header>Header</header>;
}

Correct:

jsx

function CourseCard() {
  return <div>Course</div>;
}

Correct:

jsx

function UserProfile() {
  return <div>Profile</div>;
}

Avoid:

jsx

function header() {}

and:

jsx

function courseCard() {}

Prefer:

jsx

Header
CourseCard
UserProfile

Why PascalCase?

React distinguishes component names from built-in HTML elements.

For example:

jsx

<div />

represents an HTML element.

Whereas:

jsx

<CourseCard />

represents a React component.

Capitalization provides this distinction.

Returning JSX

A functional component normally returns JSX.

jsx

function Welcome() {
  return (
    <section>
      <h1>Welcome</h1>
      <p>Learn React step by step.</p>
    </section>
  );
}

The JSX describes the UI React should render.

Parentheses and JSX

When JSX spans multiple lines, parentheses make the return easier to read:

jsx

function Header() {
  return (
    <header>
      <h1>TechLearningPro</h1>
      <nav>Navigation</nav>
    </header>
  );
}

You can also write:

jsx

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

Both are valid.

Functional Components Can Return HTML-Like JSX

For example:

jsx

function Profile() {
  return (
    <div>
      <h2>Student Profile</h2>
      <p>React Developer</p>
    </div>
  );
}

Remember:

JSX looks like HTML, but it is JavaScript syntax that describes UI.

Functional Components Can Contain JavaScript

This is an important feature.

jsx

function User() {
  const name = "Jagannath";

  return (
    <h1>
      Hello, {name}
    </h1>
  );
}

The component contains:

text

JavaScript
   +
JSX

Variables Inside Components

You can define variables:

jsx

function Course() {
  const title = "React Fundamentals";
  const price = 4999;

  return (
    <div>
      <h2>{title}</h2>
      <p>₹{price}</p>
    </div>
  );
}

The {} allows JavaScript expressions to be used inside JSX.

Expressions Inside JSX

For example:

jsx

function Course() {
  const price = 5000;
  const discount = 500;

  return (
    <p>
      Final price: ₹{price - discount}
    </p>
  );
}

Result:

text

Final price: ₹4500

You can use JavaScript expressions inside JSX.

Functional Components Can Receive Props

Components can accept information from their parent.

jsx

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

Then:

jsx

<Greeting name="Jagannath" />

The component receives:

text

name
 ↓
Greeting
 ↓
Hello, Jagannath

Props will be covered in much greater detail separately.

Props Are Function Inputs

A useful mental model:

jsx

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

Think of it like:

text

Props
  ↓
Function
  ↓
UI

Similar to:

javascript

function greet(name) {
  return `Hello, ${name}`;
}

This analogy is useful when learning React.

Multiple Props

A functional component can accept multiple props.

jsx

function CourseCard({
  title,
  instructor,
  price
}) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{instructor}</p>
      <strong>₹{price}</strong>
    </article>
  );
}

Use it:

jsx

<CourseCard
  title="React"
  instructor="John"
  price={4999}
/>

Functional Components Can Have State

Modern React allows functional components to use state through Hooks.

Example:

jsx

import { useState } from "react";

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

  return (
    <button
      onClick={() => setCount(count + 1)}
    >
      Count: {count}
    </button>
  );
}

The component now has its own state.

State Flow

The basic flow is:

text

Initial State
     ↓
Component Renders
     ↓
User Interaction
     ↓
State Update
     ↓
React Re-renders
     ↓
Updated UI

For the counter:

text

count = 0
   ↓
click
   ↓
count = 1
   ↓
UI updates

Functional Components and Hooks

Hooks allow functional components to use React features.

Common Hooks include:

text

useState
useEffect
useContext
useReducer
useMemo
useCallback
useRef

We'll study each of these later.

The important point now is:

Functional components can use React Hooks.

Handling Events

Functional components can define event handlers.

jsx

function LoginButton() {
  function handleLogin() {
    console.log("Login clicked");
  }

  return (
    <button onClick={handleLogin}>
      Login
    </button>
  );
}

Here:

text

User clicks button
       ↓
onClick
       ↓
handleLogin()

Event Handler With State

jsx

import { useState } from "react";

function LikeButton() {
  const [liked, setLiked] = useState(false);

  function handleClick() {
    setLiked(!liked);
  }

  return (
    <button onClick={handleClick}>
      {liked ? "Liked" : "Like"}
    </button>
  );
}

The component contains:

text

State
+
Event
+
Logic
+
UI

This is a very common React pattern.

Conditional Rendering

Functional components can conditionally render UI.

jsx

function UserStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  }

  return <h2>Please log in.</h2>;
}

Or:

jsx

function UserStatus({ isLoggedIn }) {
  return (
    <h2>
      {isLoggedIn
        ? "Welcome back!"
        : "Please log in."}
    </h2>
  );
}

Rendering Lists

Functional components commonly render arrays.

jsx

function CourseList() {
  const courses = [
    "React",
    "Java",
    "Spring Boot"
  ];

  return (
    <ul>
      {courses.map(course => (
        <li key={course}>
          {course}
        </li>
      ))}
    </ul>
  );
}

The component:

text

Data
 ↓
map()
 ↓
JSX
 ↓
UI

Functional Components Can Call Functions

For example:

jsx

function calculatePrice(price, discount) {
  return price - discount;
}

function Course() {
  const finalPrice =
    calculatePrice(5000, 500);

  return (
    <h2>
      ₹{finalPrice}
    </h2>
  );
}

Components are still JavaScript functions, so normal JavaScript concepts remain available.

Functional Components Can Compose Other Components

This is one of their most important capabilities.

jsx

function Header() {
  return <header>Header</header>;
}

function CourseList() {
  return <section>Courses</section>;
}

function Footer() {
  return <footer>Footer</footer>;
}

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

Component tree:

text

App
├── Header
├── CourseList
└── Footer

Functional Components Can Be Nested in the Tree

For example:

jsx

function CourseCard() {
  return <article>Course</article>;
}

function CourseList() {
  return (
    <section>
      <CourseCard />
      <CourseCard />
    </section>
  );
}

function App() {
  return <CourseList />;
}

Tree:

text

App
 ↓
CourseList
 ├── CourseCard
 └── CourseCard

This is composition.

Separate Component Files

A professional project generally separates meaningful components.

text

src/
│
├── components/
│   ├── Header.jsx
│   ├── CourseCard.jsx
│   └── Footer.jsx
│
├── App.jsx
└── main.jsx

For example:

CourseCard.jsx

jsx

function CourseCard() {
  return (
    <article>
      <h2>React Fundamentals</h2>
    </article>
  );
}

export default CourseCard;

Then:

App.jsx

jsx

import CourseCard from "./components/CourseCard";

function App() {
  return <CourseCard />;
}

export default App;

Default Export

You can export a component like this:

jsx

function Header() {
  return <header>Header</header>;
}

export default Header;

Then import:

jsx

import Header from "./Header";

Named Export

You can also use a named export:

jsx

export function Header() {
  return <header>Header</header>;
}

Then:

jsx

import { Header } from "./Header";

Both are valid module patterns.

Arrow Function Components

Functional components can also be written as arrow functions.

jsx

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

Or:

jsx

const Welcome = () => (
  <h1>Welcome</h1>
);

Both represent functional components.

Traditional Function vs Arrow Function

Traditional:

jsx

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

Arrow:

jsx

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

Both are commonly used.

For beginners, the traditional function syntax can sometimes be easier to understand because it clearly communicates:

This is a function.

Which Syntax Should You Use?

There is no requirement that all React components must use arrow functions.

Both are valid:

jsx

function Header() {
  return <header />;
}

and:

jsx

const Header = () => {
  return <header />;
};

Choose a consistent style for your project.

Implicit Return

Arrow functions allow a shorter syntax:

jsx

const Header = () => (
  <header>
    <h1>My Website</h1>
  </header>
);

Because the parentheses create an implicit return.

Equivalent:

jsx

const Header = () => {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
};

Functional Components and Purity

A good React component should generally behave predictably.

For the same inputs:

text

Props + State + Context
          ↓
        Output

The rendering logic should avoid unexpected side effects.

For example, avoid doing this directly during rendering:

jsx

function User() {
  fetch("/api/user");

  return <h1>User</h1>;
}

Network requests and other side effects need appropriate React patterns.

We'll study Effects separately.

Don't Perform Side Effects During Rendering

Rendering should primarily calculate UI.

Think:

text

Render
 ↓
Calculate UI
 ↓
Return JSX

Side effects such as:

text

Network requests
Subscriptions
Timers
DOM manipulation

require appropriate handling.

This distinction becomes extremely important when learning useEffect.

Functional Components and this

One major advantage for modern React developers is that functional components don't use the class component this model.

You don't write:

jsx

this.state
this.setState
this.props

Instead, functional components use:

jsx

props
useState
useContext
other Hooks

This makes the programming model more function-oriented.

Functional Components vs Class Components

Historically, React applications commonly used class components.

Example:

jsx

class Counter extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <button>
        {this.state.count}
      </button>
    );
  }
}

Modern React generally favors functional components.

Equivalent modern approach:

jsx

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

  return (
    <button>
      {count}
    </button>
  );
}

Why Functional Components Became Standard

Functional components became the preferred style because Hooks allow functions to use React features without class-specific concepts.

They generally provide:

text

Simpler syntax
Hooks
Composition
Less class boilerplate
No this binding
Reusable logic through custom Hooks

Modern React development is centered around functional components and Hooks.

Functional Components and Custom Hooks

One of the most powerful modern patterns is extracting reusable logic into custom Hooks.

For example:

jsx

function useOnlineStatus() {
  // reusable state/effect logic
}

Then:

jsx

function UserStatus() {
  const isOnline =
    useOnlineStatus();

  return (
    <p>
      {isOnline ? "Online" : "Offline"}
    </p>
  );
}

This allows logic to be reused without duplicating component code.

We'll study custom Hooks later.

Functional Components and Composition

Suppose we have:

jsx

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

Now:

jsx

function Login() {
  return (
    <Button>
      Login
    </Button>
  );
}

The Button component doesn't need to know what the parent wants to put inside it.

This is a powerful form of composition.

Component Responsibilities

A functional component should ideally have a clear responsibility.

Good:

text

LoginForm
CourseCard
SearchBar
Navigation
UserProfile

Potentially problematic:

text

ApplicationEverythingComponent

If a component handles:

text

Authentication
Payments
Courses
Notifications
Reports
Settings

it probably needs better decomposition.

Keep Components Understandable

Compare:

jsx

function CourseCard() {
  // 500 lines of logic
  // API calls
  // filtering
  // payment processing
  // authentication
  // UI
}

with:

jsx

function CourseCard({
  title,
  instructor,
  price
}) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{instructor}</p>
      <strong>₹{price}</strong>
    </article>
  );
}

The second component is much easier to understand.

Functional Components Don't Have to Be Tiny

Don't interpret "small components" as:

Every component must be only 10 lines.

A component can legitimately contain significant logic.

The real question is:

Does this component have a coherent responsibility?

That's more important than line count.

A Real Example

Let's create a product component:

jsx

function ProductCard({
  name,
  price,
  inStock
}) {
  return (
    <article>
      <h2>{name}</h2>

      <p>
        Price: ₹{price}
      </p>

      <p>
        {inStock
          ? "In stock"
          : "Out of stock"}
      </p>
    </article>
  );
}

Use it:

jsx

function App() {
  return (
    <>
      <ProductCard
        name="Banarasi Saree"
        price={4999}
        inStock={true}
      />

      <ProductCard
        name="Silk Saree"
        price={6999}
        inStock={false}
      />
    </>
  );
}

One component can represent many products.

Component Lifecycle Thinking

Even with functional components, a component has a lifecycle-like progression:

text

Component enters tree
        ↓
Render
        ↓
Updates
        ↓
Re-render
        ↓
Eventually removed

Hooks such as useEffect allow you to synchronize with external systems during appropriate phases.

We'll cover this in detail later.

Functional Components and Re-rendering

Consider:

jsx

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

  return (
    <button
      onClick={() =>
        setCount(count + 1)
      }
    >
      {count}
    </button>
  );
}

When setCount updates state:

text

State changes
     ↓
React schedules an update
     ↓
Component renders again
     ↓
New UI description
     ↓
React updates necessary DOM

The function being called again does not mean React throws away the entire application.

Important: Rendering Is Not DOM Replacement

A beginner may think:

text

State change
 ↓
Delete entire page
 ↓
Create entire page again

That's not the right mental model.

Instead:

text

State change
 ↓
React renders
 ↓
React determines changes
 ↓
Necessary DOM updates

This distinction becomes important when studying React's rendering model.

Functional Components and Accessibility

Components should also produce accessible UI.

For example:

Good:

jsx

function SearchButton() {
  return (
    <button>
      Search
    </button>
  );
}

Avoid replacing semantic HTML unnecessarily:

jsx

function SearchButton() {
  return (
    <div onClick={handleSearch}>
      Search
    </div>
  );
}

A real <button> already provides important browser behavior and accessibility semantics.

Functional Components and Testing

Functional components are easy to test at the UI level.

For example:

jsx

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

A test can render:

text

name = "Jagannath"

and verify that:

text

Hello, Jagannath

appears.

Testing should generally focus on user-observable behavior rather than internal implementation details.

Common Mistake: Calling a Component Like a Normal Function

You might see:

jsx

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

and incorrectly write:

jsx

<div>
  {Greeting()}
</div>

Although React components are functions, you generally use them as components:

jsx

<Greeting />

Why?

Because React needs to manage the component within its rendering model, including things such as Hooks and component identity.

Common Mistake: Calling Hooks Conditionally

Incorrect:

jsx

function User() {
  if (isLoggedIn) {
    const [name, setName] =
      useState("");
  }

  return <div />;
}

Hooks must follow the Rules of Hooks.

Generally:

jsx

function User() {
  const [name, setName] =
    useState("");

  if (!isLoggedIn) {
    return <Login />;
  }

  return <Profile name={name} />;
}

We'll study the Rules of Hooks in detail later.

Common Mistake: Mutating State Directly

Avoid:

jsx

user.name = "John";

when user is React state.

Instead, use the appropriate state update mechanism.

For example:

jsx

setUser({
  ...user,
  name: "John"
});

State management deserves a dedicated lesson.

Common Mistake: Side Effects During Render

Avoid:

jsx

function Component() {
  localStorage.setItem(
    "key",
    "value"
  );

  return <div />;
}

Rendering should remain predictable.

Side effects need appropriate handling.

Common Mistake: Giant Functional Components

Functional components can still become badly designed.

The fact that a component uses a function doesn't automatically make the architecture good.

Bad:

text

App.jsx
 └── 1500-line function

Functional programming syntax doesn't replace good architecture.

Common Mistake: Overusing Components

Don't create:

text

OneWordComponent
OneIconComponent
OneDivComponent
OneSpanComponent

unless there is a meaningful reason.

Use components where they create:

text

Reuse
Clarity
Encapsulation
Independent behavior
Meaningful abstraction

Functional Component Best Practices

1. Use clear names

jsx

function CourseCard() {}

2. Keep responsibilities focused.

3. Prefer explicit props.

jsx

<CourseCard title="React" />

4. Keep rendering predictable.

5. Avoid side effects during rendering.

6. Use Hooks according to their rules.

7. Compose components.

8. Extract reusable logic into custom Hooks when appropriate.

9. Prefer semantic HTML.

10. Don't optimize prematurely.

A Complete Example

Let's combine the concepts.

jsx

import { useState } from "react";

function CourseCard({
  title,
  instructor,
  price
}) {
  const [enrolled, setEnrolled] =
    useState(false);

  function handleEnroll() {
    setEnrolled(true);
  }

  return (
    <article>
      <h2>{title}</h2>

      <p>
        Instructor: {instructor}
      </p>

      <p>
        Price: ₹{price}
      </p>

      <button
        onClick={handleEnroll}
        disabled={enrolled}
      >
        {enrolled
          ? "Enrolled"
          : "Enroll"}
      </button>
    </article>
  );
}

This single component demonstrates:

text

Functional component
       +
Props
       +
State
       +
Event handling
       +
Conditional rendering
       +
JSX

Using the Component

jsx

function App() {
  return (
    <main>
      <CourseCard
        title="React Fundamentals"
        instructor="John"
        price={4999}
      />

      <CourseCard
        title="Advanced React"
        instructor="Sarah"
        price={6999}
      />
    </main>
  );
}

The same component is reused with different data.

The Complete Mental Model

Think of a functional component like this:

text

                  Functional Component
                           │
                           ▼
                    JavaScript Function
                           │
          ┌────────────────┼────────────────┐
          ▼                ▼                ▼
        Props            State           Context
          │                │                │
          └────────────────┼────────────────┘
                           ▼
                         Logic
                           │
                           ▼
                          JSX
                           │
                           ▼
                         React
                           │
                           ▼
                           UI

This is the foundation for everything that follows.

Functional Components vs Class Components

Feature	Functional	Class
Syntax	Function	Class
Modern React	✅ Preferred	⚠️ Legacy/common in older code
Hooks	✅	❌
`this`	Not required	Required
State	Hooks	`this.state`
Updates	State setters	`setState()`
Logic reuse	Custom Hooks	Patterns such as HOCs/render props
Modern development	Standard	Mostly legacy code

If you're learning modern React today:

Focus primarily on functional components and Hooks.

You should still understand class components enough to maintain older React codebases.

Interview questions & answers

Interview preparation

5 questions grouped by difficulty — expand any card for a model answer and follow-up probe.

Beginner

1What Is a Functional Component?
Beginner
Model answer
A functional component is a JavaScript function that participates in React's component model and returns JSX describing the UI.
Modern functional components can use Hooks for state, effects, context, and other React capabilities.
They can receive data through props and compose other components.
2Can a Functional Component Have State?
Beginner
Model answer
Yes.
Functional components use Hooks such as useState for state.
Before Hooks, they were commonly used for simpler stateless UI; with Hooks, they can handle sophisticated stateful behavior.
3Is Every Function a React Component?
Beginner
Model answer
No.
A normal JavaScript function is not automatically a React component.
A functional component participates in React's rendering and component model and returns React-renderable UI.

Intermediate

4Why Are Functional Components Preferred?
Intermediate
Model answer
Modern React favors functional components because Hooks provide access to React features without the complexity of class components and this.
Functional components also make it easier to reuse stateful logic through custom Hooks and compose UI in a straightforward way.

Advanced

5Function Component vs Function?
Advanced
Model answer
A functional component is implemented using a JavaScript function, but React uses it as part of the component tree.
It returns React-renderable UI and can use props, state, context, and Hooks.
A normal JavaScript function does not necessarily participate in React rendering.

Practical Exercise

Create this component:

text

StudentCard

It should accept:

text

name
course
progress

Expected usage:

jsx

<StudentCard
  name="Rahul"
  course="React"
  progress={75}
/>

Expected UI:

text

Rahul
React
Progress: 75%

Solution

jsx

function StudentCard({
  name,
  course,
  progress
}) {
  return (
    <article>
      <h2>{name}</h2>
      <p>Course: {course}</p>
      <p>Progress: {progress}%</p>
    </article>
  );
}

Slightly Advanced Exercise

Now add a button:

text

Mark Complete

When clicked, change:

text

Progress: 75%

to:

text

Progress: 100%

This introduces the next major concept:

text

Functional Component
       ↓
State
       ↓
Event
       ↓
State Update
       ↓
Re-render

The Most Important Mental Model

When you see:

jsx

function CourseCard({ title }) {
  return (
    <article>
      <h2>{title}</h2>
    </article>
  );
}

Think:

text

                 CourseCard
                     │
                     ▼
             JavaScript Function
                     │
                     ▼
                   Props
                     │
                     ▼
                    JSX
                     │
                     ▼
                React renders
                     │
                     ▼
                     UI

And when state is added:

text

Props + State
      ↓
Functional Component
      ↓
JSX
      ↓
UI
      ↑
      │
User interaction
      │
State update
      │
   setState()

That is the core model of modern React functional components.

Ready to mark this lesson complete?Track your journey across the entire course.