State Management with React Hooks

The book is available in kindle and paperback formats

The State Management with React Hooks book is available in kindle and paperback formats.

State management is a common challenge when developing web applications.
This book explores state management with React Hooks by building several small applications.

Here are some of the things we will go through:

• Understand what state is
• Managing form inputs
• Doing form validation
• Encapsulating the form state management and validation in custom hooks
• Adding, deleting, and editing items in lists
• Accessing and changing the state data inside the callbacks for the timer utilities
• Dealing with state management when fetching, searching, and paginating data
• Showing a confirmation modal

Chapters

• Chapter 01: Understanding State
• Chapter 02: Immutable State Data
• Chapter 03: Form
• Chapter 04: Form State Custom Hook
• Chapter 05: Drop-Down List
• Chapter 06: Checkbox List vs List of Radio Buttons
• Chapter 07: Form Validation
• Chapter 08: Form Validation Custom Hook
• Chapter 09: Adding and Deleting Items in Lists
• Chapter 10: Refactoring with the Reducer Hook
• Chapter 11: Master Detail
• Chapter 12: Timers
• Chapter 13: Fetching Data
• Chapter 14: Searching
• Chapter 15: Pagination
• Chapter 16: Modal Component
• Chapter 17: Asking for Delete Confirmation
• Chapter 18: Takeaways

Chapter 1: Understanding State

What is state? Is state just data?

These are questions we are going to explore in this first chapter. We will implement a simple toggle button component and then draw some conclusions about state.

Is This State?

Let’s start by creating a function component displaying a button with the text On or Off depending on the isOn variable.

function ToggleButton() {
  const isOn = true;
  return <button>{isOn ? 'On' : 'Off'}</button>;
}

export default ToggleButton;

The function component declares a constant isOn holding the current status of the button and then uses conditional rendering to display a button with the right text, On or Off.

What do you say, can we think of the isOn variable as storing state data at this point?

No. The isOn does not change. It does not represent state data.

Next, we give the ability to the isOn variable to be changed by creating it with the let declaration.

function ToggleButton() {
  let isOn = true;

  function toggle() {
    isOn = !isOn;
    console.log(isOn);
  }

  return (
    <button onClick={toggle}>
      {isOn ? 'On' : 'Off'}
    </button>
  );
}
export default ToggleButton;

The toggle function handles the onClick event of the toggle button. When the button is clicked the boolean value stored in the isOn variable changes and then the new value is logged to the console.

You may notice that even though the variable changes, the HTML is not updated.

What do you think? Does the isOn variable store state at this point?

Not yet. Even if state represents data that can change, modifying that data should be reflected on the screen. The value stored in the isOn variable changes but the screen does not show this modification.

State Hook

React allows us to define such variables storing state and updating the screen when they change using the useState hook utility.

The useState hook function takes the initial value and returns an array with two elements. The first value gives read access to the state value, and the second element is a setter function and allows changing that state. This setter function modifies the state value and invokes the component function. By doing so it changes the HTML.

In the next example, the isOn variable allows us to read the state and the setIsOn function changes that state and re-renders the HTML by invoking the ToogleButton function. The state variable is initialized with false.

import { useState } from 'react';

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  console.log(isOn);

  function toggle() {
    setIsOn(!isOn);
  }
  return (
    <button onClick={toggle}>
      {isOn ? 'On' : 'Off'}
    </button>
  );
}
export default ToggleButton;

Thanks for showing interest in this book. Click here to view a sample.