Em que casos deve usar o estado local e em que casos o estado global?

O estado local é usado para dados específicos de um componente e que não afetam outras partes da aplicação. Exemplos: estado de uma janela modal aberta/fechada, conteúdo de um campo de entrada de formulário, estado de carregamento para um elemento específico.

O estado global é usado para dados que são compartilhados entre vários componentes e requerem gestão centralizada. Exemplos: dados do usuário após autenticação, carrinho de compras, configurações de tema da aplicação, estado de carregamento para toda a aplicação.

A escolha depende de quão ampla é a área de abrangência dos dados e o número de componentes que precisam acessar e modificar esses dados. O estado global é frequentemente gerenciado com bibliotecas como Redux, MobX ou Context API. Usar o estado local onde for suficiente simplifica os componentes e aumenta o desempenho. Usar o estado global para dados compartilhados ajuda a evitar o "prop drilling" e facilita a gestão do estado ao nível da aplicação.