React Function Components

Function components are the modern and most common way to create components in React.

A function component is simply a JavaScript function that returns JSX describing the UI.

For example:

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

Here, Welcome is a function component.

You can use it inside another component like this:

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

React calls the Welcome function and uses the JSX it returns to render the interface.

Function components are the foundation for creating reusable React UI. As you continue learning React, you will use function components together with props, state, hooks, events, conditional rendering, lists, and other React features.

What Is a Function Component?

A function component is a JavaScript function that:

• Has a component name.
• Returns JSX or another valid React renderable value.
• Can receive props.
• Can use React Hooks.
• Can contain JavaScript logic.
• Can use other components.

A simple example:

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

The function:

function Header()

defines the component.

The return statement:

return <header>My Website</header>;

describes what should appear in the UI.

You can then render it:

<Header />

A Function Component Is Still a JavaScript Function

One of the easiest ways to understand function components is to remember that they are built using ordinary JavaScript functions.

For example:

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

This is a normal JavaScript function.

A React function component looks similar:

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

The difference is what the function returns.

A normal function might return:

return 10;

A React function component usually returns JSX:

return <h1>Hello!</h1>;

React uses that returned JSX to determine what UI should be rendered.

The Basic Structure

The basic structure of a function component is:

function ComponentName() {
  return (
    <div>
      Content
    </div>
  );
}

For example:

function Profile() {
  return (
    <section>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </section>
  );
}

There are three important parts:

function Profile()
        ↓
Component definition

return (...)
        ↓
UI returned by the component

<Profile />
        ↓
Component usage

Creating Your First Function Component

Let’s create a simple component:

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

Now use it inside App:

function App() {
  return (
    <main>
      <Welcome />
    </main>
  );
}

The complete example is:

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

function App() {
  return (
    <main>
      <Welcome />
    </main>
  );
}

export default App;

React renders the Welcome component inside App.

Function Components Must Start With a Capital Letter

React uses capitalization to distinguish custom components from built-in HTML elements.

Correct:

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

Use it as:

<Header />

Incorrect:

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

Using:

<header />

does not refer to your header function. Lowercase JSX names are treated as HTML elements.

Component Naming Convention

Use PascalCase for function component names:

Header
Footer
ProductCard
UserProfile
ShoppingCart
LoginForm
CourseCard

Avoid:

header
productcard
userprofile
shoppingcart

Good naming makes components easier to recognize throughout your project.

Function Components Can Return JSX

A function component normally returns JSX:

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

You can return a single element:

function Title() {
  return <h1>React Course</h1>;
}

Or multiple elements wrapped in a parent:

function Profile() {
  return (
    <div>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </div>
  );
}

You can also use a Fragment:

function Profile() {
  return (
    <>
      <h2>Arafat</h2>
      <p>Frontend Developer</p>
    </>
  );
}

The important point is that the function must return a valid React-renderable result.

Function Components Can Contain Variables

Because function components are JavaScript functions, you can create variables inside them.

function UserProfile() {
  const name = "Arafat";
  const age = 22;

  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

The variables are evaluated when React renders the component.

This allows components to create dynamic interfaces.

Function Components Can Contain Logic

Function components can contain JavaScript logic before the return.

function Product({ price, stock }) {
  const isAvailable = stock > 0;

  return (
    <article>
      <p>Price: ₹{price}</p>

      <p>
        {isAvailable ? "Available" : "Out of Stock"}
      </p>
    </article>
  );
}

The component calculates:

const isAvailable = stock > 0;

and then uses that value while rendering the UI.

This is one of the major advantages of function components.

Function Components Can Receive Props

Function components can accept data through props.

For example:

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

You can use the component like this:

<Greeting name="Arafat" />

React passes the value:

Arafat

through the name prop.

The component displays:

Hello, Arafat!

Destructuring Props

Instead of writing:

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

you can destructure the prop:

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

This is very common in React code.

You can destructure multiple props:

function UserCard({ name, age, role }) {
  return (
    <article>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Role: {role}</p>
    </article>
  );
}

Then:

<UserCard
  name="Arafat"
  age={22}
  role="Frontend Developer"
/>

Function Components Can Be Reused

A major advantage of function components is reusability.

Suppose you create:

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

You can use it multiple times:

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

Instead of rewriting:

<button>Buy Now</button>

multiple times, you define the component once.

Props can make the component even more reusable:

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

Then:

<Button text="Buy Now" />
<Button text="Login" />
<Button text="Submit" />

The same function component now supports different content.

Function Components Can Use Other Components

A function component can render other components.

function Logo() {
  return <h1>My Website</h1>;
}

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

Then:

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

The relationship looks like:

App
 ↓
Header
 ↓
Logo

This is how larger interfaces are constructed from smaller components.

Function Components Can Use State

Modern React function components can use state with Hooks such as useState.

For example:

import { useState } from "react";

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

  return (
    <div>
      <h2>{count}</h2>

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

The component manages its own count state.

When the user clicks the button:

setCount(count + 1)

updates the state.

React then renders the component again with the new state.

Function Components Can Use Hooks

Hooks allow function components to use React features.

Some commonly used Hooks include:

useState
useEffect
useContext
useReducer
useMemo
useCallback
useRef

For example:

import { useState } from "react";

and:

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

Hooks are designed to work with function components.

You will learn them in much greater detail later in the React course.

Function Components Can Handle Events

A function component can define event handlers.

function Button() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

The component contains:

function handleClick() {
  alert("Button clicked!");
}

and connects it to:

onClick={handleClick}

This gives the component both its UI and behavior.

Function Components Can Have Conditional Rendering

You can use JavaScript conditions inside function components.

function UserStatus({ loggedIn }) {
  if (!loggedIn) {
    return <p>Please log in.</p>;
  }

  return <p>Welcome back!</p>;
}

Or use a ternary:

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

Function components work naturally with React’s conditional rendering patterns.

Function Components Can Render Lists

A function component can render arrays of data.

function Skills() {
  const skills = [
    "HTML",
    "CSS",
    "JavaScript",
    "React"
  ];

  return (
    <ul>
      {skills.map((skill) => (
        <li key={skill}>{skill}</li>
      ))}
    </ul>
  );
}

The component creates the data and transforms it into JSX.

In real applications, the data may instead come through props or an API.

Function Components Can Return null

Sometimes a component should render nothing.

function Message({ show }) {
  if (!show) {
    return null;
  }

  return <p>Hello!</p>;
}

When show is false, React renders nothing for this component.

This can be useful when an entire piece of UI should be hidden.

Function Components Can Be Stored in Separate Files

As your project grows, components are usually placed in separate files.

For example:

src/
├── App.jsx
└── components/
    ├── Header.jsx
    ├── Footer.jsx
    └── ProductCard.jsx

Header.jsx:

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

export default Header;

Then import it into App.jsx:

import Header from "./components/Header";

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

export default App;

Separating components makes larger projects easier to organize.

Default Export and Function Components

A component can be exported as a default export:

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

export default Header;

Then import it without braces:

import Header from "./Header";

You can also combine declaration and export:

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

Both approaches are valid.

Named Export and Function Components

A component can also use a named export:

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

Then import it using braces:

import { Header } from "./Header";

Remember the distinction:

Default export
export default
      ↓
import Header

Named export
export function Header
      ↓
import { Header }

Function Components and the Component Tree

Function components can form a hierarchy.

For example:

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

function Dashboard() {
  return (
    <>
      <Header />
      <Sidebar />
      <Content />
    </>
  );
}

The component tree looks like:

App
 │
 └── Dashboard
      ├── Header
      ├── Sidebar
      └── Content

Each function component represents a part of the overall interface.

This structure becomes especially important when you start passing data between parent and child components.

Function Components and Rendering

When React needs to render a function component, it invokes the component function.

Conceptually:

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

When used:

<Greeting />

React evaluates the component and uses its returned JSX to determine the UI.

A simplified flow is:

<Greeting />
     ↓
React invokes Greeting()
     ↓
Greeting returns JSX
     ↓
React processes the returned UI
     ↓
Browser displays the result

This is a useful mental model for understanding function components.

Function Components Can Be Pure

A component is generally easier to reason about when its output is based on its inputs and state rather than unexpected side effects during rendering.

For example:

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

Given:

<Greeting name="Arafat" />

the component consistently produces the corresponding UI.

Avoid performing side effects directly during rendering, such as:

function App() {
  localStorage.setItem("visited", "true");

  return <h1>Home</h1>;
}

Operations that are true side effects generally belong in the appropriate React mechanisms, such as event handlers or useEffect, depending on what you’re trying to accomplish.

Function Components vs Regular Functions

Although a function component is a JavaScript function, not every function is a React component.

Regular JavaScript function:

function calculateTotal(price, quantity) {
  return price * quantity;
}

Function component:

function Product() {
  return <h2>Product</h2>;
}

The important distinction is that a React component is used as part of the React UI and follows React’s component rules.

A helper function can be used inside a component:

function calculateTotal(price, quantity) {
  return price * quantity;
}

function Product() {
  const total = calculateTotal(500, 2);

  return <p>Total: ₹{total}</p>;
}

Here calculateTotal is a regular JavaScript function, while Product is a React component.

Common Mistakes

Using Lowercase Component Names

Incorrect:

function productCard() {
  return <div>Product</div>;
}

Correct:

function ProductCard() {
  return <div>Product</div>;
}

Forgetting to Return JSX

Incorrect:

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

The JSX isn’t returned.

Correct:

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

Forgetting to Import a Component

If Header is defined in another file:

<Header />

you need to import it:

import Header from "./components/Header";

Calling a Component Like a Regular Function

Avoid:

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

Use JSX:

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

Using <Header /> allows React to treat it as a component and apply React’s component behavior correctly.

Defining Components Inside Components

Avoid unnecessarily defining components inside another component:

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

  return <Header />;
}

While nested component definitions can be technically possible, defining components at module scope is generally preferable because it avoids recreating the component definition during every render and can preserve component identity more predictably.

Prefer:

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

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

Mutating Data During Rendering

Avoid changing external data directly while rendering:

function App() {
  users.push(newUser);

  return <UserList />;
}

Rendering should generally describe the UI rather than mutate application data.

Best Practices for Function Components

Keep Components Focused

A component should have a clear responsibility.

Instead of creating one enormous component:

function App() {
  // Header
  // Sidebar
  // Products
  // Cart
  // Footer
  // Hundreds of lines...
}

split meaningful sections into components:

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

Use Props for Reusable Data

Instead of hardcoding:

function UserCard() {
  return <h2>Arafat</h2>;
}

make the component reusable:

function UserCard({ name }) {
  return <h2>{name}</h2>;
}

Now it can display different users.

Keep Rendering Logic Readable

Simple logic can stay inside the component:

const isAvailable = stock > 0;

Then:

{isAvailable ? "Available" : "Out of Stock"}

For complicated logic, move calculations into well-named variables or helper functions.

Don’t Make Every Element a Component

You don’t need:

<Heading />
<Paragraph />
<Span />
<Text />

just because each is technically possible.

Create components when they provide meaningful reuse, organization, behavior, or separation.

Practical Example

Let’s create a reusable course card:

function CourseCard({ title, price, students }) {
  return (
    <article className="course-card">
      <h2>{title}</h2>

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

      <p>{students} students enrolled</p>

      <button>
        Enroll Now
      </button>
    </article>
  );
}

Now the parent component can reuse it:

function App() {
  return (
    <main>
      <CourseCard
        title="React for Beginners"
        price={1499}
        students={1200}
      />

      <CourseCard
        title="JavaScript Essentials"
        price={999}
        students={850}
      />

      <CourseCard
        title="HTML & CSS"
        price={699}
        students={2100}
      />
    </main>
  );
}

The result is three different course cards created from the same function component.

The component contains the structure:

CourseCard
├── Title
├── Price
├── Student Count
└── Button

while the parent provides the data.

This separation between component structure and component data is one of the most important ideas in React.

Function Component Mental Model

A useful way to think about a function component is:

             Props
               ↓
        ┌──────────────┐
        │   Component  │
        │              │
State → │  JavaScript  │
        │    Logic     │
        └──────┬───────┘
               ↓
             JSX
               ↓
          Rendered UI

Props and state provide information.

The component uses JavaScript logic to determine what should appear.

The returned JSX describes the resulting UI.

React then updates the interface when the relevant data changes.

Image Placement

Place this image immediately after the section “What Is a Function Component?”

Create a 16:9 modern React educational infographic explaining the basic structure of a function component.

Show this flow visually:

function Welcome() {
        ↓
   JavaScript Logic
        ↓
      return
        ↓
   <h1>Welcome</h1>
        ↓
    React UI
}

On the right side, show a browser preview displaying Welcome to React.

Use a modern code-editor aesthetic, clean typography, React-inspired visual elements, subtle developer tooling details, and minimal text. The design should look contemporary rather than like an old programming textbook.

Caption: A React function component is a JavaScript function that returns UI.

Alt text: React function component showing a JavaScript function returning JSX and producing rendered UI.

Practice Exercise

Create a function component called StudentCard.

It should accept these props:

name
course
progress

For example:

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

The component should render:

Arafat
React
Progress: 75%

Then add a progress bar using a dynamic style:

style={{ width: `${progress}%` }}

Add conditional text:

Completed

when progress reaches 100, otherwise:

In Progress

Bonus Challenge

Create three StudentCard components with different names, courses, and progress values.

For example:

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

<StudentCard
  name="Rahul"
  course="JavaScript"
  progress={100}
/>

<StudentCard
  name="Sara"
  course="CSS"
  progress={45}
/>

Try to keep the StudentCard component itself unchanged while changing only the data passed through props.

Quick Cheat Sheet

Concept	Example
Function component	function Header() { ... }
Return JSX	return <h1>Hello</h1>
Use component	<Header />
Receive props	function User({ name })
Use props	<h1>{name}</h1>
Use state	useState(0)
Handle events	onClick={handleClick}
Conditional UI	{isLoggedIn && <Dashboard />}
Render lists	{items.map(...)}
Render nothing	return null
Export component	export default Header
Import component	import Header from "./Header"

Key Takeaways

• A function component is a JavaScript function that returns UI.
• Function components are the modern and most common way to create React components.
• Component names should use PascalCase.
• A function component normally returns JSX.
• Function components can contain JavaScript variables and logic.
• Props allow components to receive data.
• State allows components to manage changing data.
• Hooks allow function components to use React features such as state and effects.
• Function components can render other components.
• Function components can handle events and conditional rendering.
• Function components can be reused with different props.
• Components can be exported and imported from separate files.
• Keep components focused and avoid unnecessarily large or deeply nested components.
• Think of a function component as a JavaScript function that turns props and state into UI.