State Management

Redux vs Context vs Zustand Gerenciar Estado React Native

Compare soluções de estado React Native. Aprenda quando usar Redux, Context API ou Zustand com exemplos práticos.

Comparação Completa

Escolha a melhor Estado em 3 Abordagens

Compare Redux, Context API e Zustand para React Native. Veja prós, contras e quando usar cada solução.

Soluções

100%

Testadas

5min

Setup

store.js

const useStore = create((set) => ({ user: null, setUser: (user) => set({ user }) }));

Por que isso é importante

Gerenciar estado corretamente evita bugs, melhora performance e facilita manutenção do código.

Complexidade

Apps crescem e estado fica difícil de gerenciar

Performance

Re-renders desnecessários causam lag

Manutenção

Código organizado facilita updates

Solução Redux Toolkit

Quando usar: Apps complexos com muitas telas compartilhando estado.

✅ Prós

• DevTools poderoso para debug
• Middleware para async actions
• Time travel debugging
• Padrão previsível
• Comunidade grande

❌ Contras

• Boilerplate extenso
• Curva de aprendizado
• Overhead para apps simples
• Configuração complexa
• Bundle size maior

Exemplo Redux Toolkit

// store/userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    data: null,
    loading: false
  },
  reducers: {
    setUser: (state, action) => {
      state.data = action.payload;
    },
    setLoading: (state, action) => {
      state.loading = action.payload;
    }
  }
});

export const { setUser, setLoading } = userSlice.actions;
export default userSlice.reducer;

// Uso no componente
const user = useSelector(state => state.user.data);
const dispatch = useDispatch();

const handleLogin = () => {
  dispatch(setUser({ name: 'João', email: 'joao@email.com' }));

Solução Context API

Quando usar: Estado simples compartilhado entre poucos componentes.

✅ Prós

• Nativo do React
• Zero dependências
• Setup simples
• Ideal para temas/auth
• Bundle size mínimo

❌ Contras

• Re-renders em cascata
• Sem DevTools nativo
• Difícil otimizar
• Provider hell
• Sem middleware

Exemplo Context API

// contexts/UserContext.js
const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  const login = async (credentials) => {
    setLoading(true);
    try {
      const userData = await authAPI.login(credentials);
      setUser(userData);
    } finally {
      setLoading(false);
    }
  };



export default function GerenciarEstadoReactNative() {
  return (
    <UserContext.Provider value={{ user, loading, login }}>
      {children}
    </UserContext.Provider>
  );
};

// Hook customizado
export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser deve ser usado dentro de UserProvider');
  }
  return context; // Uso no componente
const { user, login } = useUser();

Solução Zustand

Quando usar: Melhor dos dois mundos - simples como Context, poderoso como Redux.

✅ Prós

• API super simples
• Performance otimizada
• TypeScript nativo
• Bundle size pequeno
• DevTools disponível

❌ Contras

• Comunidade menor
• Menos middleware
• Documentação limitada
• Padrões menos definidos
• Relativamente novo

Exemplo Zustand

// stores/userStore.js
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

const useUserStore = create(
  devtools(
    persist(
      (set, get) => ({
        user: null,
        loading: false,
        
        setUser: (user) => set({ user }),
        
        login: async (credentials) => {
          set({ loading: true });
          try {
            const userData = await authAPI.login(credentials);
            set({ user: userData, loading: false });
          } catch (error) {
            set({ loading: false });
            throw error;
          }
        },
        
        logout: () => set({ user: null })
      }),
      { name: 'user-storage' }
    )
  )
);

// Uso no componente
const { user, login, logout } = useUserStore();
const loading = useUserStore(state => state.loading);

Qual Escolher?

Guia prático para escolher a melhor solução de estado.

🎯 Context API - Quando Usar

Ideal para:

• Autenticação simples
• Tema da aplicação
• Configurações globais
• Apps pequenos/médios

Exemplo de uso:

// App de blog pessoal // E-commerce simples // Portfolio

🚀 Redux Toolkit - Quando Usar

Ideal para:

• Apps complexos
• Muitas telas
• Time travel debug
• Middleware customizado

Exemplo de uso:

// App bancário // E-commerce complexo // Dashboard admin

⚡ Zustand - Quando Usar

Ideal para:

• Maioria dos casos
• Performance crítica
• TypeScript first
• Desenvolvimento rápido

Exemplo de uso:

// App social // Produtividade // Jogos mobile

🏆 Recomendação CrazyStack

Zustand

Para 90% dos projetos React Native

Simples

API intuitiva

Rápido

Performance otimizada

Flexível

Cresce com o projeto

Migração Entre Soluções

Context → Zustand

Migração gradual e simples:

1. Instale Zustand
2. Crie store equivalente
3. Substitua useContext por useStore
4. Remova Providers

Redux → Zustand

Migração por módulos:

1. Identifique slices independentes
2. Converta um slice por vez
3. Mantenha Redux para complexos
4. Remova Redux gradualmente

Domine Arquitetura React Native

Aprenda padrões avançados de estado e arquitetura mobile