State Hooks

For storing information in component use one of these Hooks:

useState declares a state variable that you can update directly.
useReducer declares a state variable with the update logic inside a reducer function.

useState

Add a state variable to your component.

Parameters

initialState: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render.
- If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state.

Returns

useState returns an array with exactly two values:

The current state.
The set function that lets you update the state to a different value and trigger a re-render.

Set function

The set function only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call.
If the new value is identical to the current state, React will skip re-rendering the component and its children.
React updates the screen after all the event handlers have run and have called their set functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use flushSync.
Calling the set function during rendering is only allowed from within the currently rendering component. See an example below.
State is considered read-only, so you should replace it rather then mutate your existing objects. don't mutate state
React saves the initial state once and ignores it on the next renders. don't call functions in initialState
You can reset a component’s state by passing a different key to a component. Resetting state with a key

const [sum, setSum] = useState(0);
function handleClick(value) {
  setSum((a) => a + value);
}

Example: update value in current render

function handleClick() {
  console.log(count); // 0

  setCount(count + 1); // Request a re-render with 1
  console.log(count); // Still 0!

  setTimeout(() => {
    console.log(count); // Also 0!
  }, 5000);
}

Example: Storing information from previous renders

import { useState } from "react";

export default function CountLabel({ count }) {
  const [prevCount, setPrevCount] = useState(count);
  const [trend, setTrend] = useState(null);
  if (prevCount !== count) {
    setPrevCount(count);
    setTrend(count > prevCount ? "increasing" : "decreasing");
  }
  return (
    <>
      <h1>{count}</h1>
      {trend && <p>The count is {trend}</p>}
    </>
  );
}

Example: Updating objects and arrays in state

// Don't mutate an object in state like this:
form.firstName = "Taylor";

// Replace state with a new object

setForm({
  ...form,
  firstName: "Taylor",
});

Example: Avoiding recreating the initial state

The result of createInitialTodos() is only used for the initial render, you’re still calling this function on every render. This can be wasteful if it’s creating large arrays or performing expensive calculations.

function TodoList() {
  // React will call this function on every render.
  const [todos, setTodos] = useState(createInitialTodos());

  // React will only call it during initialization.
  const [blogs, setBlogs] = useState(createInitialBlogs);

  // ...
}

Example: Resetting state with a key

When the key changes, React re-creates the Form component (and all of its children) from scratch, so its state gets reset.

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

Example: How to store functions

This example below will call function

const [fn, setFn] = useState(someFunction);

function handleClick() {
  setFn(someOtherFunction);
}

To store functions, you need to do something like this:

const [fn, setFn] = useState(() => someFunction);

function handleClick() {
  setFn(() => someOtherFunction);
}

useReducer

This hook is similar to useState, but it is used when you have complext state logic. State is imutable.

Parameters

reducer: The reducer function that specifies how the state gets updated. Should take the state and action as arguments, and should return the next state. State and action can be of any types.
initialArg: The value from which the initial state is calculated. It can be a value of any type. How the initial state is calculated from it depends on the next init argument.
optional init: The initializer function that should return the initial state. If it’s not specified, the initial state is set to initialArg. Otherwise, the initial state is set to the result of calling init(initialArg).

Writing reducers well

Reducers must be pure. Similar to state updater function. reducers run during rendering! Actions should not send requests, schedule timeouts, or perform any side effects. They should update objects and arrays without mutations.
Each action describes a single user interaction, even if that leads to multiple changes in the data. For example, if a user presses "Reset" on a form with five fields managed by a reducer, it makes more sense to dispatch one reset_form action rather than five separate set_field actions. If you log every action in a reducer, that log should be clear enough for you to reconstruct what interactions or responses happened in what order.

Example: basic

function Counter() {
  const [counter, setCounter] = useReducer<Reducer<number, number>>(
    (prev, next) => {
      if (next <= 5) return next;
      return prev;
    },
    0
  );

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Add to counter</button>
    </div>
  );
}

Example: Todo

const changeText = (newText: string) => ({
  type: "CHANGE_TEXT" as const,
  payload: { newText },
});

const addTodo = () => ({
  type: "ADD_TODO" as const,
});

const changeTodo = (id: number) => ({
  type: "UPDATE_TODO" as const,
  payload: { id },
});

const deleteTodo = (id: number) => ({
  type: "DELETE_TODO" as const,
  payload: { id },
});

type Action =
  | ReturnType<typeof changeText>
  | ReturnType<typeof addTodo>
  | ReturnType<typeof changeTodo>
  | ReturnType<typeof deleteTodo>;
type State = {
  draft: string;
  todos: { id: number; text: string }[];
};

const initialState: State = {
  draft: "",
  todos: [],
};

function reducer(state: State, action: Action) {
  switch (action.type) {
    case "CHANGE_TEXT": {
      return {
        ...state,
        draft: action.payload.newText,
      };
    }
    case "ADD_TODO": {
      return {
        todos: [...state.todos, { id: state.todos.length, text: state.draft }],
        draft: "",
      };
    }
    case "UPDATE_TODO": {
      return {
        todos: state.todos.map((t) => {
          if (t.id === action.payload.id) {
            return { ...t, text: state.draft };
          } else {
            return t;
          }
        }),
        draft: "",
      };
    }
    case "DELETE_TODO": {
      return {
        todos: state.todos.filter((t) => t.id !== action.payload.id),
        draft: "",
      };
    }
    default: {
      throw Error("Unknown action: " + action["type"]);
    }
  }
}

export default function ToDo() {
  const [state, dispatch] = React.useReducer<React.Reducer<State, Action>>(
    reducer,
    initialState
  );

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    dispatch({
      type: "CHANGE_TEXT",
      payload: { newText: e.target.value },
    });
  };
  const handleAddTodo = () => {
    dispatch({ type: "ADD_TODO" });
  };
  const handleUpdateTodo = (id: number) => {
    dispatch({ type: "UPDATE_TODO", payload: { id } });
  };

  const handleDeleteTodo = (id: number) => {
    dispatch({ type: "DELETE_TODO", payload: { id } });
  };

  return (
    <div>
      <input
        type="text"
        className="border-2"
        value={state.draft}
        onChange={handleInputChange}
      />
      <button onClick={handleAddTodo}>Add todo</button>

      {state.todos.map((todo) => (
        <div key={todo.id} className="flex gap-2">
          <p>{todo.text}</p>
          <button
            className="bg-yellow-500"
            onClick={() => handleUpdateTodo(todo.id)}
          >
            Update todo
          </button>
          <button
            className="bg-red-500"
            onClick={() => handleDeleteTodo(todo.id)}
          >
            Delete todo
          </button>
        </div>
      ))}
    </div>
  );
}

Example: Avoiding recreating the initial state

function createInitialState(username) {
  // ...
}

// React will call this function on every render.
function TodoList({ username }) {
  const [state, dispatch] = useReducer(reducer, createInitialState(username));
  // ...
}

// React will only call it during initialization.
function BlogList({ username }) {
  const [state, dispatch] = useReducer(reducer, username, createInitialState);
  // ...
}

Example: Show calculated value in same function

You need to do two calculations.

function handleClick() {
  console.log(state.age); // 42

  dispatch({ type: "incremented_age" }); // Request a re-render with 43
  console.log(state.age); // Still 42!

  setTimeout(() => {
    console.log(state.age); // Also 42!
  }, 5000);
}

const action = { type: "incremented_age" };
dispatch(action);

const nextState = reducer(state, action);
console.log(state); // { age: 42 }
console.log(nextState); // { age: 43 }

useState vs useReducer

useState and useReducer differ from each other in the logic used to save state. useReducer uses the initialization logic you provided to determine how to save new data, whereas useState simply saves the data you provide.

It is recommended that you use a reducer if you often encounter bugs due to incorrect state updates in some components and want to introduce more structure to their code.

Code size: useReducer requires you to write both a reducer function and dispatch actions, but with useState you will not have to write that. However, useReducer can reduce the amount of code if numerous event handlers change state similarly.
Readability: useState is very easy to read when the state updates are simple. When they get more complex, they can bloat your component’s code and make it difficult to scan. In this case, useReducer lets you cleanly separate the how of update logic from the what happened of event handlers.
Debugging: When you have a bug with useState, it can be difficult to tell where the state was set incorrectly, and why. With useReducer, you can add a console log into your reducer to see every state update, and why it happened (due to which action).
Testing: A reducer is a pure function that doesn’t depend on your component. This means that you can export and test it separately in isolation.