Gerenciamento de estado local e global

Para criar aplicações React eficientes, é essencial entender como gerenciar o estado, tanto localmente quanto globalmente.

Estado Local em Componentes

Em React, o estado local é gerenciado usando o hook . Ele permite que você adicione estado a componentes funcionais. Veja um exemplo simples:useState

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Neste exemplo, é o estado local e é a função para atualizá-lo. Sempre use para estados que são específicos a um componente.countsetCountuseState

Estado Global com Context API

Para estados que precisam ser compartilhados entre componentes, a Context API do React é útil. Ela permite criar um contexto global que pode ser acessado por componentes aninhados. Veja um exemplo básico:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('dark');

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);

  return (
    <div>
      <p>O tema atual é: {theme}</p>
    </div>
  );
}

Neste exemplo, define o contexto global com o valor , que é acessado em usando .ThemeContext.ProviderthemeToolbaruseContext

Quando Usar Estado Global versus Local

Use estado local () para dados que são específicos a um componente e não precisam ser compartilhados com outros.useState

Use estado global (Context API) para dados que precisam ser acessados por vários componentes ou componentes aninhados.

Conclusão

Dominar o gerenciamento de estado é fundamental para construir aplicações React escaláveis e eficientes. Pratique usando para estados locais e experimente a Context API para estados globais. Isso ajudará você a estruturar seus componentes de maneira organizada e fácil de manter.useState

Compartilhar

Compartilhar

Siga-me