Topic 5 of 53

Function Components

Overview

A React Component is a reusable, self-contained piece of UI that has its own logic and appearance. Think of them as custom HTML tags.

In modern React (since the introduction of Hooks in version 16.8), the industry exclusively uses Function Components. A Function Component is literally just a standard JavaScript function that accepts data (called 'props') as an argument and returns JSX (the UI).

By building applications out of independent functions, your codebase becomes modular and highly maintainable. You can write a <Navbar /> component once, and render it on 50 different pages. If you need to change the logo, you modify the Navbar function once, and the change instantly propagates across the entire application.

Syntax

Creating and Using a Component

jsx

// 1. Define the Component (Must start with a Capital Letter)
function UserProfile() {
  return (
    <div className="profile-card">
      <img src="/avatar.png" alt="User" />
      <h3>John Doe</h3>
      <p>Software Engineer</p>
    </div>
  );
}

// 2. Use it like a custom HTML tag in another component
function App() {
  return (
    <main>
      <h1>Our Team</h1>
      {/* Reusing the component multiple times */}
      <UserProfile />
      <UserProfile />
    </main>
  );
}

Common Pitfalls

Lowercase Component Names: React component names MUST start with a Capital letter (e.g., UserProfile, not userProfile). If you start it with a lowercase letter, React's JSX compiler will assume it is a standard HTML tag (like <div> or <span>) and your component will fail to render.
Using Class Components: Prior to 2019, React relied on OOP class Component extends React.Component. While you may see this in 5-year-old legacy tutorials, they are completely obsolete. Do not write new code using Class components.

Interview Questions

Why did the React community shift from Class Components to Function Components?

Class components were heavily bloated with boilerplate, required dealing with the notoriously confusing this keyword, and made it difficult to reuse logic between components. Function components, combined with React Hooks, allow developers to write significantly cleaner, more concise code and easily extract logic into custom reusable hooks.

What defines a pure component function?

A pure function is a function that, given the same inputs (props), will always return the exact same output (JSX) without causing any side effects (like modifying global variables or making unprompted API calls). React relies heavily on components being pure to optimize rendering.

Real-World Example

Modular Layout Construction: In enterprise apps, the Sidebar might be a 500-line file maintained by one engineer, and Feed might be a 1000-line file maintained by another. By separating them into distinct Function Components, the main Dashboard remains incredibly clean and readable.

example

jsx

// We break complex screens into small, manageable functions
function Sidebar() {
  return <aside>Menu Links Here</aside>;
}

function Feed() {
  return <main>Posts go here</main>;
}

function Dashboard() {
  // The Dashboard orchestrates the smaller components
  return (
    <div className="layout-grid">
      <Sidebar />
      <Feed />
    </div>
  );
}

Check Your Knowledge

Test your understanding of Function Components with these quick questions.

Which of the following is a VALID modern React Component?

What is the primary input and output of a React Function Component?

Take React.js Quiz

Overview

A React Component is a reusable, self-contained piece of UI that has its own logic and appearance. Think of them as custom HTML tags.

Syntax

Creating and Using a Component

jsx

// 1. Define the Component (Must start with a Capital Letter)
function UserProfile() {
  return (
    <div className="profile-card">
      <img src="/avatar.png" alt="User" />
      <h3>John Doe</h3>
      <p>Software Engineer</p>
    </div>
  );
}

// 2. Use it like a custom HTML tag in another component
function App() {
  return (
    <main>
      <h1>Our Team</h1>
      {/* Reusing the component multiple times */}
      <UserProfile />
      <UserProfile />
    </main>
  );
}

Common Pitfalls

Lowercase Component Names: React component names MUST start with a Capital letter (e.g., UserProfile, not userProfile). If you start it with a lowercase letter, React's JSX compiler will assume it is a standard HTML tag (like <div> or <span>) and your component will fail to render.
Using Class Components: Prior to 2019, React relied on OOP class Component extends React.Component. While you may see this in 5-year-old legacy tutorials, they are completely obsolete. Do not write new code using Class components.

Interview Questions

Why did the React community shift from Class Components to Function Components?

What defines a pure component function?

Real-World Example

example

jsx

// We break complex screens into small, manageable functions
function Sidebar() {
  return <aside>Menu Links Here</aside>;
}

function Feed() {
  return <main>Posts go here</main>;
}

function Dashboard() {
  // The Dashboard orchestrates the smaller components
  return (
    <div className="layout-grid">
      <Sidebar />
      <Feed />
    </div>
  );
}

Check Your Knowledge

Test your understanding of Function Components with these quick questions.