PauloRB.dev

Entendendo o Conceito de Estado no React

Por Paulo RB em 16/04/2024

Em React, o estado refere-se a uma estrutura de dados que determina o comportamento do componente e como ele será renderizado na interface. Por exemplo, o estado de um componente pode incluir dados como o valor atual de um contador ou se um botão está ativado ou não. O estado é local e encapsulado dentro do componente, o que significa que não pode ser acessado ou modificado diretamente por outros componentes, a menos que seja passado explicitamente como props.

O gerenciamento de estado em React pode ser feito de várias maneiras, dependendo da complexidade e da escala da aplicação. Vamos explorar algumas das principais:

Estado Local: O estado local é gerenciado dentro do próprio componente usando o hook useState. Este é um dos hooks fornecidos pelo React para permitir que os componentes funcionais tenham estado. Aqui está um exemplo simples:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Neste exemplo, useState é usado para criar count como uma variável de estado. A função setCount é usada para atualizar o valor de count.

Estado Global: Para estados que precisam ser compartilhados entre vários componentes, pode-se usar contextos ou bibliotecas de gerenciamento de estado como Redux ou MobX. O useContext é um hook que permite compartilhar estado de forma mais eficiente entre vários componentes sem necessidade de prop drilling (passar props de pai para filho repetidamente).

Para gerenciar um estado global em uma aplicação React, você pode usar a Context API. A Context API permite que você compartilhe estados entre vários componentes, sem a necessidade de passá-los explicitamente através de uma árvore de componentes.

Aqui está um exemplo básico que mostra como usar a Context API para criar e consumir um estado global:

• Criar o Contexto: Primeiro, criamos um contexto utilizando React.createContext() e definimos um provedor de contexto que encapsula os componentes que precisam do estado.

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

// Criando o contexto
const CountContext = createContext();

// Componente provedor
function CountProvider({ children }) {
    const [count, setCount] = useState(0);

    return (
        <CountContext.Provider value={{ count, setCount }}>
            {children}
        </CountContext.Provider>
    );
}

export { CountProvider, CountContext };

• Consumir o Estado Global: Os componentes que precisam acessar ou modificar o estado global podem consumir o contexto usando o hook useContext.

import React, { useContext } from 'react';
import { CountProvider, CountContext } from './CountProvider';

function Counter() {
    const { count, setCount } = useContext(CountContext);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

function App() {
    return (
        <CountProvider>
            <Counter />
        </CountProvider>
    );
}

export default App;

Estado Derivado: Estado derivado é aquele que é calculado com base em mudanças em outros estados ou props. Pode ser implementado usando o hook useEffect, que executa efeitos colaterais em resposta a mudanças de estado ou prop.

Estado derivado refere-se ao estado que é computado com base nas mudanças em outros estados ou props. Abaixo está um exemplo de como você pode usar useEffect para criar um estado derivado que reage a mudanças em outro estado:

import React, { useState, useEffect } from 'react';

function TemperatureConverter() {
    const [celsius, setCelsius] = useState(0);
    const [fahrenheit, setFahrenheit] = useState(32);

    useEffect(() => {
        const f = (celsius * 9/5) + 32;
        setFahrenheit(parseFloat(f.toFixed(2)));
    }, [celsius]);

    useEffect(() => {
        const c = (fahrenheit - 32) * 5/9;
        setCelsius(parseFloat(c.toFixed(2)));
    }, [fahrenheit]);

    return (
        <div>
            <label>
                Celsius:
                <input
                    type="number"
                    value={celsius}
                    onChange={(e) => setCelsius(e.target.value)}
                />
            </label>
            <label>
                Fahrenheit:
                <input
                    type="number"
                    value={fahrenheit}
                    onChange={(e) => setFahrenheit(e.target.value)}
                />
            </label>
        </div>
    );
}

export default TemperatureConverter;

Neste exemplo, cada vez que o valor em Celsius é atualizado, o useEffect correspondente recalcula Fahrenheit, e vice-versa. Essa abordagem garante que as duas temperaturas estejam sempre sincronizadas.

O estado é crucial em React porque permite que os componentes respondam a mudanças de dados e sejam dinâmicos. Por exemplo, sem o estado, seria impossível criar um formulário que reage à entrada do usuário ou uma lista que adiciona itens dinamicamente. O estado torna possível a criação de experiências interativas e dinâmicas na web.