Introduction to React’s Building Blocks

Welcome to Chapter 2! In our journey to master modern React system design, understanding the core building blocks is paramount. Just as a master builder needs to know how to lay bricks and mix mortar, a React architect must deeply grasp how components work, how they communicate, and how they manage their internal state. This chapter lays that crucial foundation.

We’ll dive into the heart of React: components. You’ll learn what they are, why they’re so powerful for building user interfaces, and how to effectively manage the data that makes them dynamic and interactive. We’ll explore the fundamental concepts of props and state, and then unlock the magic of React Hooks, which are the modern way to bring state and side effects into functional components. By the end of this chapter, you’ll be confidently designing and implementing simple, yet robust, React components.

This chapter assumes you have a basic understanding of JavaScript (ES6+ features like arrow functions and destructuring), HTML, and CSS. If you’ve completed Chapter 1, you should also have a development environment set up and be ready to write some code! We’ll be using principles applicable to React 18/19, which are the stable versions as of early 2026.

Core Concepts: Components, Props, and State

At its heart, a React application is a tree of components. Think of components as independent, reusable pieces of UI. From a simple button to an entire navigation bar, each part of your interface can be a component. This modularity is key to building complex applications that are easy to develop, test, and maintain.

What is a Component?

A component is essentially a JavaScript function (or a class, though functional components with Hooks are the modern standard) that returns a piece of UI. This UI is described using JSX, a syntax extension for JavaScript that looks a lot like HTML.

Why are components so important?

  • Reusability: Write once, use everywhere.
  • Modularity: Break down complex UIs into manageable, isolated parts.
  • Maintainability: Easier to debug and update smaller, focused pieces of code.
  • Testability: Each component can be tested independently.

Let’s visualize this component tree idea:

graph TD A[Root App Component] --> B[Header Component] A --> C[Main Content Component] A --> D[Footer Component] C --> E[Sidebar Component] C --> F[Content Area Component] F --> G[Card Component 1] F --> H[Card Component 2]

Mental Model: Imagine your entire web page as the “Root App Component.” Inside it, you might have a “Header,” “Main Content,” and “Footer.” The “Main Content” might further contain a “Sidebar” and a “Content Area,” which then has multiple “Card Components.” Each box is a function or class responsible for rendering its specific part of the UI.

Props: Passing Data Down

Components often need to display dynamic data or behave differently based on their context. This is where props (short for “properties”) come in. Props are how you pass data from a parent component to a child component. They are read-only, meaning a child component should never directly modify the props it receives.

What: Props are arguments passed to a React component. Why: To make components dynamic and reusable by allowing parents to configure their children. How: As attributes in JSX, which are then received as an object in the child component’s function signature.

Consider a Button component. You might want different buttons to have different text or respond to different clicks.

// Parent component
function Toolbar() {
  const handleClick = () => alert('Hello!');
  return (
    <div>
      <Button text="Click Me" onClick={handleClick} />
      <Button text="Learn More" onClick={() => console.log('More info!')} />
    </div>
  );
}

// Child component
function Button(props) {
  return (
    <button onClick={props.onClick}>
      {props.text}
    </button>
  );
}

Here, Toolbar is the parent, and Button is the child. The text and onClick are props passed from Toolbar to Button. The Button component uses props.text to display its label and props.onClick to define what happens when it’s clicked. Simple, right?

State: Managing Internal Data

While props allow components to receive data from above, state allows a component to manage data that is internal to itself and can change over time. When a component’s state changes, React efficiently re-renders that component and its children to reflect the new data.

What: State is an object that holds data that might change over the lifetime of a component. Why: To enable interactive UIs where data can be updated based on user actions, network responses, or other events. How: Using the useState Hook in functional components (more on Hooks next!).

Imagine a counter. The current count is data that belongs to the counter component, and it needs to change when a user clicks “increment” or “decrement.”

import React, { useState } from 'react';

function Counter() {
  // `count` is the current state value, `setCount` is the function to update it
  const [count, setCount] = useState(0); // Initialize count to 0

  const increment = () => {
    setCount(count + 1); // Update the state
  };

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this Counter component, count is a piece of state. When setCount is called, React knows the count has changed and will re-render the Counter component to show the new value.

React’s Rendering Mechanism: The Virtual DOM and Reconciliation

Before we dive deeper into state management with Hooks, it’s crucial to understand how React efficiently updates the UI. This knowledge helps you write performant applications.

  1. The Virtual DOM: When your component renders, React doesn’t directly manipulate the browser’s DOM (Document Object Model). Instead, it creates a lightweight representation of the DOM in memory, called the Virtual DOM. This is much faster to work with than the actual browser DOM.

  2. Reconciliation: When a component’s props or state change, React creates a new Virtual DOM tree. It then compares this new tree with the previous Virtual DOM tree (a process called “diffing”). React identifies the minimal set of changes needed to update the actual browser DOM to match the new Virtual DOM.

  3. Efficient Updates: Only the necessary changes are applied to the real DOM. This highly optimized process is why React is so fast and efficient, avoiding costly direct DOM manipulations.

Takeaway: Don’t worry about manually updating the DOM. Just update your component’s state or props, and React handles the rest!

Introducing React Hooks (React 16.8+ and beyond)

Hooks are functions that let you “hook into” React state and lifecycle features from functional components. They were introduced in React 16.8 (and are the standard way to write React components as of 2026, with React 19 being the stable version, building upon these foundations). They allow you to write powerful, stateful logic without using class components.

useState: The State Hook

You’ve already seen useState in action with our Counter. Let’s break it down:

const [stateVariable, setStateVariable] = useState(initialValue);
  • stateVariable: This is the current value of your state.
  • setStateVariable: This is a function that you call to update stateVariable. When you call this function, React will re-render the component.
  • initialValue: The value your state starts with. This can be a primitive (number, string, boolean) or an object/array.

Important Note: When updating state with useState, always provide a new value. For objects and arrays, this means creating a new object or array with the changes, rather than mutating the existing one. This is critical for React’s change detection to work correctly.

useEffect: The Effect Hook

Components often need to perform “side effects” – actions that happen outside of the normal rendering flow. These include data fetching, manual DOM manipulation, subscriptions, or setting up event listeners. The useEffect Hook lets you handle these.

useEffect(() => {
  // Code to run after every render (or after specific dependencies change)

  return () => {
    // Optional cleanup function: runs before the effect re-runs or component unmounts
  };
}, [dependencies]); // Optional dependency array
  • The first argument is a function that contains your effect logic.
  • The optional second argument, the dependencies array, is crucial.
    • If omitted, the effect runs after every render.
    • If an empty array ([]), the effect runs only once after the initial render (like componentDidMount).
    • If it contains variables (e.g., [propA, stateB]), the effect runs only when those variables change.

Why is useEffect important? It centralizes side effect logic, making it easier to reason about and manage component lifecycles. The cleanup function is vital for preventing memory leaks (e.g., unsubscribing from an event listener).

Step-by-Step Implementation: Building a Dynamic Greeting Card

Let’s build a small application that demonstrates components, props, state, and effects. We’ll create a greeting card where you can change the name and observe a side effect.

We’ll assume you have a basic React project set up (e.g., using Vite or Create React App). Open your src/App.jsx (or src/App.tsx for TypeScript) file.

Step 1: Start with a Clean Slate

Delete any existing boilerplate code in App.jsx and start with a simple functional component.

// src/App.jsx
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>My Dynamic Greeting Card</h1>
    </div>
  );
}

export default App;

Explanation:

  • import React from 'react';: Imports the React library, necessary for JSX.
  • function App() { ... }: Defines our main App functional component.
  • return (...): Inside, we return JSX, which describes the UI.
  • export default App;: Makes our App component available for other files to import.

Run your development server (npm run dev or yarn dev) and you should see “My Dynamic Greeting Card”.

Step 2: Introduce State for the Name Input

We want to allow the user to type a name. We’ll use useState to manage this input’s value.

// src/App.jsx
import React, { useState } from 'react'; // Don't forget to import useState!

function App() {
  const [name, setName] = useState('World'); // Initialize name state with 'World'

  // Event handler for input change
  const handleNameChange = (event) => {
    setName(event.target.value); // Update the name state
  };

  return (
    <div className="App">
      <h1>My Dynamic Greeting Card</h1>
      <label htmlFor="name-input">Enter a name: </label>
      <input
        id="name-input"
        type="text"
        value={name} // The input's value is controlled by our state
        onChange={handleNameChange} // Update state when input changes
      />
      <p>Hello, {name}!</p> {/* Display the current name */}
    </div>
  );
}

export default App;

Explanation of additions:

  • import { useState } from 'react';: We now explicitly import useState.
  • const [name, setName] = useState('World');: We declare a state variable name initialized to 'World' and a setter function setName.
  • handleNameChange: This function is called every time the input value changes. It receives an event object, and event.target.value gives us the current text in the input field. We then use setName to update our state.
  • <input ... value={name} onChange={handleNameChange} />: This is a “controlled component.” Its value is tied directly to our name state, and its onChange handler updates that state. This ensures a single source of truth for the input’s value.
  • <p>Hello, {name}!</p>: We display the name state dynamically. As you type, the paragraph will update!

Step 3: Create a GreetingDisplay Child Component

To demonstrate props, let’s extract the greeting message into its own component.

First, create a new file src/GreetingDisplay.jsx:

// src/GreetingDisplay.jsx
import React from 'react';

function GreetingDisplay(props) {
  return (
    <p style={{ fontSize: '24px', fontWeight: 'bold' }}>
      Hello, {props.targetName}!
    </p>
  );
}

export default GreetingDisplay;

Explanation:

  • function GreetingDisplay(props) { ... }: This is a simple functional component that expects props as its argument.
  • {props.targetName}: It accesses a prop named targetName to display the greeting.

Now, modify src/App.jsx to use this new component:

// src/App.jsx
import React, { useState } from 'react';
import GreetingDisplay from './GreetingDisplay'; // Import our new component

function App() {
  const [name, setName] = useState('World');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div className="App">
      <h1>My Dynamic Greeting Card</h1>
      <label htmlFor="name-input">Enter a name: </label>
      <input
        id="name-input"
        type="text"
        value={name}
        onChange={handleNameChange}
      />
      {/* Use the GreetingDisplay component and pass the 'name' state as a prop */}
      <GreetingDisplay targetName={name} />
    </div>
  );
}

export default App;

Explanation of additions:

  • import GreetingDisplay from './GreetingDisplay';: We import the child component.
  • <GreetingDisplay targetName={name} />: We render GreetingDisplay and pass our name state as a prop called targetName. App is the parent, GreetingDisplay is the child.

Now, the greeting message is managed by a dedicated child component, receiving its data via props!

Step 4: Add a Side Effect with useEffect

Let’s use useEffect to update the browser’s document title whenever the name changes.

Modify src/App.jsx again:

// src/App.jsx
import React, { useState, useEffect } from 'react'; // Import useEffect!
import GreetingDisplay from './GreetingDisplay';

function App() {
  const [name, setName] = useState('World');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  // Use useEffect to update the document title
  useEffect(() => {
    document.title = `Hello, ${name}!`; // This is our side effect

    // Optional: return a cleanup function
    return () => {
      // This runs before the effect re-runs or component unmounts
      console.log(`Cleaning up old title effect for: ${name}`);
    };
  }, [name]); // Dependency array: re-run effect only when 'name' changes

  return (
    <div className="App">
      <h1>My Dynamic Greeting Card</h1>
      <label htmlFor="name-input">Enter a name: </label>
      <input
        id="name-input"
        type="text"
        value={name}
        onChange={handleNameChange}
      />
      <GreetingDisplay targetName={name} />
    </div>
  );
}

export default App;

Explanation of additions:

  • import { useState, useEffect } from 'react';: We now import useEffect.
  • useEffect(() => { ... }, [name]);:
    • The first argument is an arrow function containing the side effect: document.title = \Hello, ${name}!`;`.
    • The second argument, [name], is the dependency array. This tells React: “Only re-run this effect if the name variable changes between renders.”
    • The optional return () => { ... }; is a cleanup function. In this simple case, it’s not strictly necessary for correctness, but it’s good practice to include it for effects that set up subscriptions or event listeners. It demonstrates the full useEffect signature.

Now, as you type in the input field, not only will the greeting update, but your browser tab’s title will also change dynamically!

Mini-Challenge: Add a Reset Button

Your turn! Expand the App component to include a “Reset Name” button. When clicked, this button should set the name state back to its initial value (‘World’).

Challenge:

  1. Add a <button> element below the input field in App.jsx.
  2. Give it the text “Reset Name”.
  3. Implement an onClick handler for this button that resets the name state.

Hint: You already know how to update state using the setName function. To reset to the initial value, just call setName('World').

What to observe/learn: Pay attention to how the button click directly triggers a state update, which then causes React to re-render the App component and its child GreetingDisplay, reflecting the new name value. This is the core flow of interactivity in React.

Common Pitfalls & Troubleshooting

Even with these fundamental concepts, new React developers often encounter a few common issues.

  1. Directly Mutating State:

    • Pitfall: Trying to change an object or array in state like myObject.property = newValue; setMyObject(myObject); or myArray.push(newItem); setMyArray(myArray);. React’s change detection relies on shallow comparison, so if the reference to the object/array doesn’t change, React might not detect an update and won’t re-render.
    • Correct Way: Always create a new object or array with the updated values.
      // WRONG: Mutates existing object
// const [user, setUser] = useState({ name: 'Alice', age: 30 });
// user.age = 31;
// setUser(user); // React might not re-render!

// CORRECT: Creates a new object
const [user, setUser] = useState({ name: 'Alice', age: 30 });
setUser(prevUser => ({ ...prevUser, age: 31 })); // Use spread operator for new object
      For arrays, use methods like map, filter, concat, or the spread operator [...] to create new arrays.

  2. Missing Dependency Arrays in useEffect:

    • Pitfall: Forgetting the dependency array, or providing an incorrect one.
      • useEffect(() => { /* ... */ }); (no array) runs after every render, potentially leading to infinite loops (e.g., if the effect updates state, which causes a re-render, which runs the effect again…).
      • useEffect(() => { /* ... */ }, []); (empty array) runs only once. If your effect uses variables from its parent scope (like name in our example), but those variables change, the effect will use the stale value from the initial render.
    • Correct Way: Always specify the dependency array. If your effect uses any variables (props, state, functions) from the component’s scope, include them in the dependency array. Tools like ESLint with eslint-plugin-react-hooks can help you catch these errors automatically.

  3. Prop Drilling:

    • Pitfall: Passing data down through many layers of intermediate components that don’t actually need the data themselves, just to get it to a deeply nested child. This makes components less reusable and the data flow harder to follow.
    • Solution (for later chapters): While not a pitfall for foundational understanding, be aware that this becomes a problem in larger apps. Solutions like useContext (which we briefly mentioned) or dedicated state management libraries (like Redux, Zustand, Recoil, Jotai, or even React Query for server state) are designed to solve this. We’ll explore these in depth in future chapters when discussing large-scale state management.

Summary

Congratulations! You’ve taken a significant step in understanding the core of React development. Here are the key takeaways from this chapter:

  • Components: The fundamental building blocks of React UIs, promoting reusability and modularity.
  • Props: How parent components pass data and configuration down to child components. Props are read-only.
  • State: How components manage their own internal, dynamic data. Changes to state trigger re-renders.
  • Virtual DOM & Reconciliation: React’s efficient mechanism for updating the browser’s DOM by comparing virtual representations.
  • React Hooks: The modern way to add state (useState) and side effects (useEffect) to functional components, making them powerful and expressive.
  • Controlled Components: Input elements whose values are tied to React state.
  • Immutability: Always update state by creating new objects/arrays, never by directly mutating existing ones.
  • useEffect Dependencies: Crucial for controlling when side effects run and preventing stale closures or infinite loops.

With these foundations, you’re well-equipped to build interactive user interfaces. In the next chapter, we’ll expand our understanding of component architecture, exploring patterns for organizing larger applications and preparing for more complex state management scenarios.

References

This page is AI-assisted and reviewed. It references official documentation and recognized resources where relevant.