What is a component in React - Deep Dive

Overview - What is a component

What is it?

A component in React is a reusable piece of code that represents part of a user interface. It can be thought of as a building block that controls how a section of the screen looks and behaves. Components can be simple, like a button, or complex, like an entire form. They help organize the UI into manageable parts.

Why it matters

Without components, building user interfaces would be like painting a huge wall all at once—messy and hard to fix. Components let developers break the UI into small, reusable pieces, making apps easier to build, understand, and maintain. This saves time and reduces errors, especially in big projects.

Where it fits

Before learning about components, you should understand basic JavaScript and how HTML structures a webpage. After mastering components, you can learn about state management, hooks, and how components communicate to build dynamic apps.

Mental Model

Core Idea

A component is a self-contained piece of UI that can be reused and combined to build complex interfaces.

Think of it like...

Think of components like LEGO bricks. Each brick is a small, complete piece that you can snap together with others to build anything from a simple house to a complex castle.

┌───────────────┐
│   Component   │
│ ┌───────────┐ │
│ │  UI Part  │ │
│ │ (Button)  │ │
│ └───────────┘ │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│  Reusable UI  │
│  Building     │
│  Block        │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding UI as Pieces

Concept: UI can be broken into smaller parts that each do one job.

Imagine a webpage with a header, a button, and a list. Each of these parts can be thought of as separate pieces. React components let you create these pieces as separate code blocks that control their own look and behavior.

Result

You see the UI divided into manageable parts instead of one big chunk.

Understanding that UI is made of parts helps you see why components are useful and natural.

2

Foundation

Creating a Simple Functional Component

Concept: A component is a JavaScript function that returns UI elements.

In React, a component is a function that returns JSX, which looks like HTML but is actually JavaScript. For example: function Hello() { return

Hello, world!

; } This function is a component that shows a greeting.

Result

The component renders a heading with 'Hello, world!' on the screen.

Knowing that components are just functions returning UI makes them easy to create and understand.

3

Intermediate

Using Props to Customize Components

🤔Before reading on: do you think components can change what they show without rewriting their code? Commit to yes or no.

Concept: Components can receive inputs called props to change their content dynamically.

Props are like parameters you pass to a function. For example: function Greeting(props) { return

Hello, {props.name}!

; } You can use it as to show 'Hello, Alice!'.

Result

The same component can show different greetings based on the name prop.

Understanding props lets you reuse components with different data, making your UI flexible.

4

Intermediate

Composing Components Together

🤔Before reading on: do you think components can contain other components inside them? Commit to yes or no.

Concept: Components can be combined by nesting them inside each other to build complex UIs.

You can put one component inside another like this: function App() { return (

); } This builds a UI with two greetings.

Result

The screen shows two greetings, one for Alice and one for Bob.

Knowing components can nest allows building complex interfaces from simple parts.

5

Advanced

Functional Components with Hooks

🤔Before reading on: do you think components can remember information over time without external help? Commit to yes or no.

Concept: Functional components can use hooks to hold and manage state internally.

Hooks like useState let components remember values: import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( ); } This button increases the count when clicked.

Result

The button shows a number that increases each time you click it.

Understanding hooks unlocks dynamic, interactive components without classes.

6

Expert

Component Re-rendering and Performance

🤔Before reading on: do you think every change in a component always redraws the entire UI? Commit to yes or no.

Concept: React re-renders components when their data changes but optimizes updates to avoid unnecessary work.

When a component's props or state change, React runs the component function again to get new UI. But React compares old and new UI and only updates what changed in the browser. This process is called reconciliation and helps keep apps fast.

Result

UI updates smoothly and efficiently without redrawing everything.

Knowing how React updates components helps write efficient code and avoid performance problems.

Under the Hood

React components are JavaScript functions that return a description of UI in JSX. When React renders, it calls these functions to get the UI structure. React keeps a virtual copy of the UI called the virtual DOM. When data changes, React calls the component again, compares the new virtual DOM with the old one, and updates only the parts that changed in the real browser DOM.

Why designed this way?

React was designed to make UI development easier and faster by breaking UI into reusable pieces and minimizing direct DOM manipulation, which is slow and error-prone. The virtual DOM and component model allow developers to think declaratively about UI without worrying about manual updates.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Component Fn  │──────▶│ Virtual DOM   │──────▶│ Browser DOM   │
│ (returns JSX) │       │ (diff & patch)│       │ (updates UI)  │
└───────────────┘       └───────────────┘       └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think components must be classes to hold data? Commit to yes or no.

Common Belief: Components must be class-based to have state or lifecycle features.

Reality: Functional components with hooks can hold state and use lifecycle features without classes.

Why it matters: Believing only classes can have state leads to outdated code and misses simpler, modern patterns.

Quick: Do you think components always create new DOM elements every time they update? Commit to yes or no.

Common Belief: Every time a component updates, it rebuilds the entire part of the page it controls.

Reality: React updates only the parts of the DOM that actually changed using its virtual DOM diffing.

Why it matters: Thinking updates redraw everything can cause unnecessary optimization or fear of using React.

Quick: Do you think components are only for UI and cannot contain logic? Commit to yes or no.

Common Belief: Components should only display UI and not contain any business or interaction logic.

Reality: Components often contain logic to handle user interaction, data fetching, and state management.

Why it matters: Separating logic and UI too strictly can lead to fragmented code and harder maintenance.

Quick: Do you think props can be changed inside a component? Commit to yes or no.

Common Belief: Props passed to a component can be modified inside that component.

Reality: Props are read-only inside components; only state or callbacks can change data.

Why it matters: Trying to change props causes bugs and breaks React’s data flow model.

Expert Zone

1

React components can be memoized to avoid re-rendering when props don’t change, improving performance subtly.

2

Hooks must be called in the same order every render; breaking this rule causes hard-to-debug errors.

3

React’s reconciliation algorithm uses keys to track list items; missing or wrong keys cause UI glitches.

When NOT to use

Avoid using React components for static content that never changes; plain HTML or server-rendered pages may be simpler and faster. For very complex state logic, consider state management libraries like Redux or Zustand instead of pushing all logic into components.

Production Patterns

In real apps, components are split into presentational (UI only) and container (logic and data) types. Components are organized in folders by feature. Hooks are used for state and side effects. Performance optimizations include lazy loading components and using React.memo.

Connections

Modular Programming

Components are a form of modular programming applied to UI.

Understanding components as modules helps grasp how they isolate functionality and improve code reuse.

Object-Oriented Design

Components encapsulate data and behavior like objects do.

Seeing components as objects with state and methods clarifies how UI and logic combine.

Biology - Cells

Components are like cells in a body, each with a role but working together.

This connection shows how small units combine to form complex systems, helping understand component composition.

Common Pitfalls

#1 Trying to change props inside a component.

Wrong approach:

function MyComponent(props) {
props.name = 'New Name'; // wrong
return {props.name};
}

Correct approach:

import { useState } from 'react';

function MyComponent(props) {
const [name, setName] = useState(props.name);
// change name via state
return {name};
}

Root cause:

Misunderstanding that props are read-only inputs, not variables to modify.

#2 Not using keys when rendering lists of components.

Wrong approach:

const list = items.map(item => {item.text});

Correct approach:

const list = items.map(item => {item.text});

Root cause:

Ignoring React’s need for stable keys to track list items during updates.

#3 Calling hooks conditionally inside components.

Wrong approach:

if (someCondition) {
const [count, setCount] = useState(0); // wrong
}

Correct approach:

const [count, setCount] = useState(0);
if (someCondition) {
// use count
}

Root cause:

Not knowing hooks must be called in the same order every render.

Key Takeaways

A React component is a reusable function that returns UI elements.

Components let you break complex interfaces into small, manageable parts.

Props allow components to receive data and customize their output.

Hooks enable components to hold state and respond to user actions.

React updates the UI efficiently by comparing virtual DOM changes.

Practice

1. What is a React component?

easy

A. A reusable piece of UI built with a function or class

B. A special type of variable that stores data

C. A tool to style HTML elements

D. A command to run React apps

Solution

1. Step 1: Understand React components

   A React component is a building block of UI that can be reused multiple times.

2. Step 2: Identify the correct definition

   Only A reusable piece of UI built with a function or class describes a reusable UI piece built with a function or class.

3. Final Answer:

   A reusable piece of UI built with a function or class -> Option A

4. Quick Check:

   Component = reusable UI block [OK]

Hint: Components are reusable UI parts made with functions [OK]

Common Mistakes:

• Confusing components with variables
• Thinking components are styling tools
• Believing components are commands

2. Which of the following is the correct way to define a React functional component?

easy

A. const MyComponent = 'Hello';

B. function MyComponent() { return Hello; }

C. var MyComponent = Hello;

D. class MyComponent extends React.Component { }

Solution

1. Step 1: Review functional component syntax

   A functional component is a function returning JSX, like function MyComponent() { return
   Hello; }.

2. Step 2: Check each option

   function MyComponent() { return
   Hello
   ; } matches the correct syntax. var MyComponent =
   Hello
   ; assigns JSX directly to a variable, which is not a component. const MyComponent = 'Hello'; assigns a string, not JSX. class MyComponent extends React.Component { } is a class component, not functional.

3. Final Answer:

   function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   Functional component = function returning JSX [OK]

Hint: Functional components are functions returning JSX [OK]

Common Mistakes:

• Assigning JSX directly to variables
• Using strings instead of JSX
• Confusing functional and class components

3. What will this React component render?

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

medium

A. Nothing, because the function is not called

B. An error because of missing parentheses

C. <h1>Hello, world!</h1> displayed on the page

D. A blank page with no content

Solution

1. Step 1: Understand component return value

   The component returns an <h1> element with text "Hello, world!" which React renders as HTML.

2. Step 2: Confirm rendering behavior

   When used in JSX, this component will display the heading on the page. No syntax errors exist.

3. Final Answer:

   <h1>Hello, world!</h1> displayed on the page -> Option C

4. Quick Check:

   Return JSX renders UI [OK]

Hint: Returned JSX shows on page when component is used [OK]

Common Mistakes:

• Thinking function must be called manually
• Assuming missing parentheses cause error here
• Believing component renders nothing by default

4. Identify the error in this React component:

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

medium

A. Missing semicolon after return statement

B. JSX must be wrapped in parentheses if on multiple lines

C. Function name should start with lowercase letter

D. No error, component is correct

Solution

1. Step 1: Check JSX syntax

   The JSX is a single line and correctly returned without parentheses, which is valid.

2. Step 2: Verify naming and semicolon rules

   Function names for components should start uppercase, which is true. Semicolons are optional in JavaScript here.

3. Final Answer:

   No error, component is correct -> Option D

4. Quick Check:

   Valid JSX and naming means no error [OK]

Hint: JSX on one line doesn't need parentheses [OK]

Common Mistakes:

• Thinking semicolons are mandatory after return
• Believing lowercase function names are required
• Assuming JSX always needs parentheses

5. You want to create a reusable button component that shows different text based on a property. Which is the best way to do this?

hard

A. function Button(props) { return {props.text}; }

B. function Button() { return Click me; }

C. const Button = Click me;

D. function Button(text) { return {text}; }

Solution

1. Step 1: Understand passing data to components

   Props are used to pass data to components. Using props.text allows dynamic button text.

2. Step 2: Evaluate each option

   function Button(props) { return {props.text}; } correctly uses props to show different text. function Button() { return Click me; } always shows fixed text. const Button = Click me; is not a function component. function Button(text) { return {text}; } incorrectly uses a parameter instead of props object.

3. Final Answer:

   function Button(props) { return <button>{props.text}</button>; } -> Option A

4. Quick Check:

   Use props for dynamic content [OK]

Hint: Use props to pass dynamic text to components [OK]

Common Mistakes:

• Hardcoding text inside component
• Not using props object for parameters
• Assigning JSX directly to variables