Tipando o Estado

Receita

Tipa o estado do seu componente corretamente com useState e useReducer. Lide com valores simples, objetos complexos, estado anulável e reducers de união discriminada.

Exemplo Funcional

// useState simples - o tipo é inferido
const [count, setCount] = useState(0); // number
const [name, setName] = useState(""); // string
const [enabled, setEnabled] = useState(false); // boolean

// Tipagem explícita para estado complexo ou anulável
type User = {
  id: string;
  name: string;
  email: string;
};
 
const [user, setUser] = useState<User | null>(null);
 
// Mais tarde...
if (user) {
  console.log(user.name); // TypeScript sabe que user não é null aqui
}

// useReducer com ações de união discriminada
type CounterState = {
  count: number;
  lastAction: string;
};
 
type CounterAction =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: number }
  | { type: "reset" };
 
function counterReducer(state: CounterState, action: CounterAction): CounterState {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload, lastAction: "increment" };
    case "decrement":
      return { count: state.count - action.payload, lastAction: "decrement" };
    case "reset":
      return { count: 0, lastAction: "reset" };
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0, lastAction: "none" });
 
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment", payload: 1 })}>+1</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

Mergulho Profundo

Como Funciona

• useState infere o tipo do valor inicial. useState(0) retorna [number, Dispatch<SetStateAction<number>>].
• Quando o valor inicial não representa todos os estados possíveis (por exemplo, começando como null mas eventualmente contendo um objeto), você deve fornecer um parâmetro de tipo explícito: useState<User | null>(null).
• useReducer infere os tipos de estado e ação a partir da assinatura da função reducer. Definir o reducer com tipos de parâmetro explícitos oferece segurança de tipo completa tanto no corpo do reducer quanto nas chamadas dispatch.
• Ações de união discriminada (ações com um campo literal type) permitem que o TypeScript restrinja o tipo da ação dentro de cada ramo case, dando acesso a campos específicos do ramo, como payload.

Variações

Inicializador preguiçoso:

const [data, setData] = useState<Map<string, User>>(() => new Map());

Estado com uma tupla:

const [coords, setCoords] = useState<[number, number]>([0, 0]);

useReducer com Immer:

import { useImmerReducer } from "use-immer";
 
function reducer(draft: CounterState, action: CounterAction) {
  switch (action.type) {
    case "increment":
      draft.count += action.payload;
      draft.lastAction = "increment";
      break;
    case "reset":
      draft.count = 0;
      draft.lastAction = "reset";
      break;
  }
}
 
const [state, dispatch] = useImmerReducer(reducer, { count: 0, lastAction: "none" });

Notas do TypeScript

• SetStateAction<T> é T | ((prev: T) => T). É por isso que tanto setCount(5) quanto setCount(prev => prev + 1) funcionam.
• Para useReducer, o tipo de retorno do reducer deve corresponder ao tipo do estado. O TypeScript impõe isso automaticamente quando você anota os parâmetros do reducer.
• Evite usar as com estado. Se o TypeScript reclamar, geralmente significa que seus tipos precisam de ajuste, não de um type assertion.

Armadilhas

• Usar useState<User>() sem um valor inicial resulta em User | undefined, não User. Sempre forneça um valor inicial ou digite explicitamente como User | undefined.
• Passar um literal de objeto para setUser sem espalhar o estado anterior substitui o objeto inteiro. O TypeScript detectará campos obrigatórios ausentes, o que na verdade é útil.
• Digitar o estado como any anula o propósito. Mesmo para formas dinâmicas, use Record<string, unknown> ou um tipo adequado.
• Esquecer de tratar o caso null em estado anulável leva a erros de tempo de execução que o TypeScript tenta prevenir por meio de verificações estritas de null.

Alternativas

FAQs

const [data, setData] = useState<Map<string, User>>(() => new Map());

import { useImmerReducer } from "use-immer";
 
function reducer(draft: CounterState, action: CounterAction) {
  switch (action.type) {
    case "increment":
      draft.count += action.payload;
      break;
  }
}

Relacionados

• Tipando Props
• Tipando Contexto
• Uniões Discriminadas
• Tipando Eventos