React useState Hook Introduction

A fundamental way to create state within react is with the useState hook. e.g. creating a simple counter:

App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const inc = () => setCount(count + 1);

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={inc}>+</button>
    </>
  );
}

Preventing Stale Values in useState Updates

To ensure that you read the latest value for a particular state, you can pass a callback to the set function for the state.

App.tsx

api.ts

import { useState } from 'react';
import { saveInfo } from './api';

export default function App() {
  const [count, setCount] = useState(0);

  async function inc() {
    await saveInfo();
    // setCount(count + 1); // ❌ Bad
    setCount(prev => prev + 1); // ✅ Good 
  }

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={inc}>+</button>
    </>
  );
}

useState lazy initialization

A little known feature of the useState hook is its ability to take a function initializer. This can help improve the performance of your application by allowing you execute the initialization code only once, on initial render of the component.

App.tsx

import { useState } from 'react';

export default function App() {
  console.log('render');
  const initial = () => {
    console.log('initial render');
    return +(window.localStorage.getItem('count') ?? 0)
  };
  const [count, setCount] = useState(initial);

  function inc() {
    setCount(count => {
      const next = count + 1;
      window.localStorage.setItem('count', next.toString());
      return next;
    });
  }

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={inc}>+</button>
    </>
  );
}

useState TypeScript annotation

In terms of TypeScript type definitions, the only thing you need to know is that useState takes an optional generic type argument. Most commonly you do not need it as it is inferred automatically from the passed in initial value.

However you can provide it explicitly if you want to ensure that the initial value matches your expectation.

App.tsx

import { useState } from "react";

export default function App() {
  // Notice the generic argument `<number>` in `useState<number>(0)`.
  const [count, setCount] = useState<number>(0);

  function inc() {
    setCount((count) => count + 1);
  }

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={inc}>+</button>
    </>
  );
}

Introduction to custom React hooks

You can create your own custom use* functions to create custom hooks. These can internally call other hooks like useState.

This allows you to create reusable pieces of logic and reusable components that depend on that logic.

App.tsx

Counter.tsx

import { Counter, useCounter } from "./Counter";

export default function App() {
  const first = useCounter();
  const second = useCounter();
  return (
    <>
      <Counter {...first} />
      <Counter {...second} />

      <div>Total: {first.count + second.count}</div>
    </>
  );
}

Transcript