Jotai: Gestão de Estado Simples e Eficiente no React

No desenvolvimento de aplicações React, o gerenciamento de estado é um desafio constante. Existem várias ferramentas disponíveis para essa finalidade, como Redux, Context API e Recoil. No entanto, em projetos de pequeno e médio porte, essas soluções podem adicionar uma complexidade desnecessária. Uma alternativa mais leve e simples é o Jotai, que oferece uma abordagem minimalista e poderosa para o gerenciamento de estado.

O que é Jotai para React?

Jotai é uma biblioteca leve de gerenciamento de estado para React que se destaca pela sua simplicidade e eficiência. Ao contrário de outras soluções mais complexas, Jotai utiliza átomos (unidades de estado independentes) e se baseia nos React Hooks, o que facilita a integração e o uso em diferentes componentes da aplicação.

Com Jotai, você pode criar e gerenciar estados de forma mais direta, sem a necessidade de escrever muito código repetitivo. Isso torna o desenvolvimento mais rápido e a manutenção mais fácil, especialmente em projetos menores onde a complexidade de outras bibliotecas pode ser excessiva.

A leveza do Jotai não significa que ele seja limitado. Pelo contrário, ele oferece recursos avançados para lidar com estados derivados, assíncronos e compartilhados, tudo isso mantendo a simplicidade e a facilidade de uso que o caracterizam. Se você está buscando uma alternativa a Redux ou Context API, Jotai pode ser a escolha certa para o seu projeto.

Além disso, Jotai é totalmente compatível com React, o que significa que você pode usá-lo em conjunto com outras bibliotecas e ferramentas do ecossistema React sem problemas de compatibilidade. Isso proporciona mais flexibilidade e liberdade na hora de escolher as melhores soluções para o seu projeto.

Instalação e Configuração do Jotai para React

Para começar a usar Jotai, a instalação é o primeiro passo. Você pode instalar Jotai facilmente usando npm ou yarn, os gerenciadores de pacotes mais populares no ecossistema JavaScript. Veja como fazer:

npm install jotai
ou
yarn add jotai

Após a instalação, você já pode definir seu primeiro átomo e começar a aproveitar os benefícios do Jotai para React no seu projeto. A configuração é simples e direta, permitindo que você se concentre na lógica da sua aplicação em vez de se preocupar com configurações complexas.

Criando e Usando Átomos no Jotai

Em Jotai, um átomo é a menor unidade de estado, que pode ser utilizada em qualquer componente. Vamos criar um átomo simples para gerenciar um contador:

import { atom, useAtom } from 'jotai';

// Define an atom for the counter
const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <p>Counter Value: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Explicação do Código

• Definimos um estado chamado countAtom usando atom, inicializando-o com 0.
• No componente Counter, usamos useAtom para acessar o valor do estado e sua função de atualização.
• Cada vez que o botão é clicado, o valor do contador aumenta.

O uso de átomos no Jotai simplifica o gerenciamento de estados, tornando o código mais limpo e fácil de entender. Além disso, a reatividade do Jotai garante que os componentes sejam atualizados automaticamente sempre que o estado for alterado.

Gerenciando Estado Derivado

Em algumas situações, é necessário calcular um valor com base em outro valor. Em Jotai, podemos usar Átomos Derivados:

const doubleCountAtom = atom((get) => get(countAtom) * 2);

function DoubleCounter() {
  const [doubleCount] = useAtom(doubleCountAtom);
  return <p>Double Counter Value: {doubleCount}</p>;
}

Com átomos derivados, você pode criar estados que dependem de outros estados, o que facilita a criação de lógicas complexas e a manutenção do código. A reatividade do Jotai garante que os átomos derivados sejam atualizados automaticamente sempre que os estados dos quais dependem forem alterados.

Gerenciando Dados Assíncronos com Jotai

Para gerenciar dados assíncronos (por exemplo, buscar dados de uma API), podemos usar Átomos Assíncronos:

const fetchUserAtom = atom(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return response.json();
});

function UserProfile() {
  const [user] = useAtom(fetchUserAtom);
  return <p>User Name: {user.name}</p>;
}

Com átomos assíncronos, você pode buscar dados de APIs e atualizar o estado da sua aplicação de forma simples e eficiente. O Jotai lida com a complexidade das operações assíncronas, permitindo que você se concentre na lógica da sua aplicação. Se você está desenvolvendo uma aplicação que precisa buscar dados de um servidor, Jotai pode simplificar muito o seu trabalho.

Além disso, Jotai oferece recursos para lidar com o estado de carregamento e erro das operações assíncronas, o que facilita a criação de interfaces de usuário responsivas e informativas. Você pode exibir um indicador de carregamento enquanto os dados estão sendo buscados e exibir uma mensagem de erro caso ocorra algum problema.

A combinação de átomos assíncronos com os outros recursos do Jotai torna essa biblioteca uma excelente escolha para o gerenciamento de estados em aplicações React que precisam lidar com dados dinâmicos e interações com servidores.

Projeto Prático: Lista de Tarefas

Nesta seção, vamos implementar um projeto de Lista de Tarefas usando Jotai.

Definindo o Estado

const todoListAtom = atom([]);
const newTodoAtom = atom('');

Componente da Lista de Tarefas

function TodoApp() {
  const [todos, setTodos] = useAtom(todoListAtom);
  const [newTodo, setNewTodo] = useAtom(newTodoAtom);

  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  return (
    <div>
      <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
      <button onClick={addTodo}>Add Task</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

Este exemplo prático demonstra como Jotai pode ser usado para criar aplicações interativas de forma simples e eficiente. A combinação de átomos e hooks torna o código mais legível e fácil de manter. Se você está começando com React ou procurando uma alternativa mais leve para o gerenciamento de estados, Jotai pode ser uma excelente escolha.

Além disso, a reatividade do Jotai garante que a lista de tarefas seja atualizada automaticamente sempre que uma nova tarefa é adicionada ou removida. Isso proporciona uma experiência de usuário mais fluida e responsiva.

A simplicidade do Jotai não significa que ele seja limitado. Pelo contrário, ele oferece recursos avançados para lidar com estados complexos e assíncronos, tudo isso mantendo a facilidade de uso que o caracteriza.

Em resumo, Jotai é uma ferramenta de gerenciamento de estado simples e poderosa para React que:

• Possui uma sintaxe limpa e legível.
• Utiliza hooks e é totalmente compatível com React.
• Fornece gerenciamento de estado para operações complexas e assíncronas sem boilerplate extra.

Se você está procurando uma alternativa simples ao Redux ou Context API, Jotai pode ser uma excelente escolha para o seu projeto! Se você deseja conhecer mais sobre outras ferramentas e tecnologias, veja este artigo sobre os principais lançamentos de tecnologia no MWC 2025. Além disso, confira este conteúdo sobre a importância das redes na implementação de IA. E se você é fã da Apple, confira novidades sobre o possível iPhone dobrável da Apple. Quer saber quais são os apps mais usados no Brasil? Veja os dez aplicativos mais populares do Brasil em fevereiro. E para os gamers, confira este artigo sobre um novo dispositivo portátil promete revitalizar jogos do Nintendo DS.

Este conteúdo foi auxiliado por Inteligência Artificial, mas escrito e revisado por um humano.
Via dev.to