Level 4: Hooks in React

React Hooks are specialized functions introduced in React 16.8 that allow developers to use state and other React features inside functional components without writing class components. This chapter explores the fundamental problem hooks solve, unpacks the mechanics of state management via useState, examines side-effect management with useEffect, and demonstrates persistent mutable references and DOM access using useRef.

1. The Core Problem: Why Standard Variables Fail in React

In vanilla JavaScript, updating a variable and manually assigning its new value to a Document Object Model (DOM) node updates the user interface. However, in React's declarative paradigm, standard local variables cannot trigger user interface updates.

The Naive Approach

Consider an application where a local variable is updated via a standard click handler:

function App() {
  let color = "blue";

  const changeColor = () => {
    color = "black";
    console.log("Current variable value:", color);
  };

  return (
    <div>
      <h1>My favorite color is {color}</h1>
      <button onClick={changeColor}>Change to Black</button>
    </div>
  );
}

export default App;

The Behavior and The Failure

When clicking the button:

1. The console.log statement confirms that the variable color indeed changed to "black".
2. The browser UI remains unchanged, displaying "My favorite color is blue".

Why Did This Happen?

React components are functions. When React initially loads your component:

• It calls App().
• It evaluates let color = "blue".
• It compiles the JSX into Virtual DOM nodes and paints the real DOM.
• The execution of App() finishes.

Mutating color = "black" modifies a local variable in memory, but React has no listener attached to plain local variables. React does not know that the variable changed, does not re-invoke App(), and does not re-render the DOM.

To reflect updates in the browser, React needs a mechanism that accomplishes two things simultaneously:

1. Retain the modified data between renders.
2. Signal React to trigger a component re-render with the new data.

This mechanism is called State.

2. Mental Model: What Are Hooks and Component State?

Before React 16.8, state could only be preserved and managed inside Class Components using this.state and this.setState. Functional components were purely presentational (often called "stateless functional components").

Hooks were created to give functional components full access to state management and lifecycle capabilities without needing class syntax.

Definition:

• State: A JavaScript data structure (primitive, object, or array) held and maintained by React across rendering cycles for a specific component instance.
• Hooks: Built-in functions prefixed with use (e.g., useState, useEffect, useRef) that allow developers to "hook into" React's internal state machine and rendering pipeline.

Common React Hooks Overview

3. Deep Dive into useState: Syntax and Mechanics

The useState hook is imported directly from the 'react' library. When invoked, it registers a piece of state with React's internal tracking system.

import { useState } from 'react';

const [stateValue, setStateFunction] = useState(initialValue);

Understanding Array Destructuring

When calling useState(initialValue), React returns an array containing exactly two elements:

1. Index 0 (stateValue): The current value of the state for this render cycle. On first mount, this equals initialValue.
2. Index 1 (setStateFunction): An updater function that accepts a new value, assigns it internally, and schedules a component re-render.

If you inspect the raw output of useState("blue") in the console:

const stateArray = useState("blue");
console.log(stateArray);
// Output: ["blue", ƒ ()]

JavaScript array destructuring (const [color, setColor] = ...) allows clean, idiomatic access to both elements.

4. Practical Implementation: Color Switcher and Counter

Refactoring the Color Switcher

Replacing the plain variable with useState:

import { useState } from 'react';

function App() {
  const [color, setColor] = useState("blue");

  return (
    <div>
      <h1>My favorite color is {color}</h1>
      <button onClick={() => setColor("black")}>
        Change to Black
      </button>
    </div>
  );
}

export default App;

Execution Flow on State Change

Implementing a Numerical Counter

A standard counter illustrates how state updates drive numeric transitions.

import { useState } from 'react';

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

  const handleIncrement = () => {
    // Correct way: pass the evaluated expression
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

Pitfall Alert: count++ vs count + 1

A common beginner mistake is using the unary increment operator directly inside the setter:

// ANTI-PATTERN:
setCount(count++);

• count++ (postfix increment) returns the value before incrementing, then attempts to mutate count directly.
• Mutating state variables violates React's immutability contract.
• Always pass a pure evaluation: setCount(count + 1) or an updater function setCount(prev => prev + 1).

Note on React Strict Mode (<React.StrictMode>): In modern React applications (such as those generated via Vite), root components are wrapped in <React.StrictMode>. In development mode, Strict Mode intentionally mounts and re-renders components twice to help identify uncleaned side effects and unexpected mutations. This causes console statements to appear duplicated in development.

5. Introduction to Side Effects and useEffect

A React component's primary job is to take props and state, calculate JSX, and return it. A component should ideally be a pure function with respect to rendering.

However, real-world applications must interact with systems outside the render cycle:

• Fetching data from an external REST API.
• Manually mutating the real DOM (e.g., changing document titles).
• Setting up timers or intervals (setTimeout, setInterval).
• Subscribing to external event listeners (e.g., window resize, WebSockets).

These operations are called Side Effects. Executing side effects directly inside the component body is problematic because they will run on every single render calculation, causing performance degradation and infinite loops.

useEffect provides a controlled environment to orchestrate when and how side effects execute.

Syntax Anatomy

import { useEffect } from 'react';

useEffect(() => {
  // Side effect code runs here

  return () => {
    // Optional: Cleanup code runs here before unmount or re-execution
  };
}, [/* Optional Dependency Array */]);

useEffect takes two arguments:

1. Callback Function: The code containing the side effect.
2. Dependency Array (Optional): A list of variables that React monitors to decide whether the effect should re-run.

6. The Three Execution Modes of useEffect

The presence and composition of the dependency array dictates exactly when the effect callback fires.

Synthesis Table

7. Practical Demonstration: Timers and Dependency-Driven Execution

Case 1: The Infinite Loop Trap (No Dependencies + State Update)

What happens if you run a timer that updates state inside a useEffect without a dependency array?

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }); // No dependency array!

  return <h1>Count: {count}</h1>;
}

Why does this loop infinitely?

Case 2: Running Exactly Once on Mount ([])

Passing an empty array [] breaks the infinite loop:

useEffect(() => {
  setTimeout(() => {
    setCount(count + 1);
  }, 1000);
}, []); // Empty dependency array

React checks the dependencies on the second render. Because the array is empty, nothing has changed, so the effect is not re-executed. The counter increments to 1 after one second and stops.

Case 3: Selective Triggers with Multiple States

When an application has multiple state variables, the dependency array allows you to isolate which state change triggers which side effect.

import { useState, useEffect } from 'react';

function MultiCounter() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  // This effect ONLY triggers when countOne changes
  useEffect(() => {
    console.log("Effect fired: countOne updated to", countOne);
  }, [countOne]);

  return (
    <div>
      <h2>Count 1: {countOne}</h2>
      <button onClick={() => setCountOne(countOne + 1)}>Increment Count 1</button>

      <h2>Count 2: {countTwo}</h2>
      <button onClick={() => setCountTwo(countTwo + 1)}>Increment Count 2</button>
    </div>
  );
}

export default MultiCounter;

Behavior Breakdown:

• Clicking Increment Count 1: countOne changes $\rightarrow$ React re-renders $\rightarrow$ useEffect detects countOne changed $\rightarrow$ Logs to console.
• Clicking Increment Count 2: countTwo changes $\rightarrow$ React re-renders $\rightarrow$ useEffect inspects [countOne] $\rightarrow$ countOne is unchanged $\rightarrow$ Effect is skipped.

8. Deep Dive into useRef: Retaining State Without Re-rendering

The useRef hook serves two primary use cases:

1. Storing mutable values across renders without causing re-renders.
2. Directly referencing and interacting with DOM nodes.

Anatomy of useRef

import { useRef } from 'react';

const myRef = useRef(initialValue);

useRef returns a plain JavaScript object with a single mutable property: { current: initialValue }.

Unlike state:

• You mutate it directly: myRef.current = newValue;.
• Mutating .current does not notify React and does not schedule a re-render.
• The object reference remains strictly stable across every render cycle.

Preventing Infinite Loops in Effects

If you need to track how many times a component has re-rendered without triggering an infinite re-render loop, standard useState fails. useRef solves this:

import { useState, useEffect, useRef } from 'react';

function RenderTracker() {
  const [text, setText] = useState("");
  const renderCount = useRef(0);

  useEffect(() => {
    // Mutating a ref does NOT cause the component to re-render
    renderCount.current = renderCount.current + 1;
  });

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Component has rendered: {renderCount.current} times</p>
    </div>
  );
}

If renderCount were a useState variable, updating it inside useEffect without dependencies would trigger an infinite render crash. With useRef, the value persists cleanly in the background.

9. Direct DOM Access Using useRef

In declarative React, direct manipulation of the DOM is discouraged. However, specific imperative tasks require direct access:

• Managing input focus, text selection, or media playback.
• Measuring DOM element dimensions (getBoundingClientRect).
• Integrating with non-React third-party DOM libraries.

To link a DOM node to a ref, pass the ref object to the element's JSX ref attribute:

import { useRef } from 'react';

function FocusInput() {
  const inputElementRef = useRef(null);

  const handleFocus = () => {
    // Access the real HTMLInputElement via inputElementRef.current
    if (inputElementRef.current) {
      inputElementRef.current.focus();
      inputElementRef.current.style.backgroundColor = "#f0f8ff";
    }
  };

  return (
    <div>
      <input ref={inputElementRef} type="text" placeholder="Type here..." />
      <button onClick={handleFocus}>Focus Input Box</button>
    </div>
  );
}

export default FocusInput;

10. Architectural Comparison: useState vs. useRef

Summary and Key Takeaways

• Local Variables Do Not Drive UI: Plain JavaScript variables inside functional components reset on every render and lack the reactive signals needed to trigger DOM reconciliation.
• State Drives the View: React state represents data that is tracked across rendering cycles; updating state prompts React to calculate Virtual DOM differences and re-paint the screen.
• useState Hook: Returns a pair containing the current state value and an updater function (const [state, setState] = useState(initial)). Never mutate state variables directly.
• useEffect Handles Side Effects: Keeps functional components pure by isolating operations like API fetching, timers, and manual DOM mutations outside the immediate render path.
• Dependency Array Modes:
  • Omitted: Runs after every single render.
  • Empty []: Runs exactly once after the initial mount.
  • Populated [dep1, dep2]: Runs on mount and only re-runs when specified dependencies change.
• useRef for Persistent Storage: Stores mutable data across renders without triggering a re-render cycle via its .current property.
• useRef for Direct DOM Access: Attaching a ref to a JSX element (ref={myRef}) assigns the underlying native DOM node directly to myRef.current upon mounting.