Estados e Hooks

Os estados em React são uma forma de armazenar e gerenciar dados que podem mudar ao longo do tempo em um componente. Eles permitem que você crie componentes dinâmicos que reagem a interações do usuário, atualizações de dados ou outras mudanças.

Um estado é definido dentro de um componente e pode ser inicializado usando o hook useState. Quando o estado é atualizado, o React re-renderiza o componente, refletindo as mudanças na interface do usuário.

useState

O useState é um hook que permite adicionar uma variável de estado a um componente. De uma maneira mais simples, permite que você crie uma variável que pode ser alterada dinamicamente mesmo após o componente ser renderizado.

Vamos a um exemplo:

import { useState } from 'react';

const App() => {

	const [age, setAge] = useState(initialState);
	
	// initialState é o valor que a variável age será inicializada

	// Poderíamos definir esse initialState como 19, por exemplo, nesse caso, 
	// age seria inicializada com o valor 19
	
	return(
		<>
			<p> Your age is {age} </p>
			<button onClick = { () => {setAge(nextState)} }> Click here! </button>
		</>
		
	);

}

Neste exemplo, criamos uma variável age, que contém uma função correspondente chamada setAge. Como o próprio nome indica, essa função é utilizada para alterar (setar) um novo valor a variável age e re-renderizar o componente que contém age, no caso, App.

Existe uma convenção na nomenclatura essas variáveis de estado como [something, setSomething].

useEffect

O hook useEffect recebe dois argumentos em sua chamada:

• Uma função que será executada;

• Array de Dependências (parâmetro opcional): define em qual momento a função será executada;

Esse momento será sempre após uma renderização, ou seja, o React irá executar a função depois de realizar as atualizações no DOM**.**

Caso o array de dependências seja vazio, a função só será executada uma vez, no carregamento da página.

Exemplo:

useEffect(() => {

	// Função a ser executada

}, [dependencies?]);

useContext

O useContext é um hook que permite que você acesse valores entre componentes sem a necessidade de passar propriedades manualmente em todos os níveis da árvore de componentes.

Nesse exemplo, temos algumas propriedades (props) definidas no componente main. Caso queiramos acessá-las em níveis menores, é necessário passarmos por parâmetro em cada chamada dos componentes essas propriedades.

Já nesse exemplo, é criado um Context que contém os componentes main, firstChildren e secondChildren. As props que antes eram geradas na main e passadas uma a uma para os níveis mais baixos na árvore, são "globais” e podem ser acessadas por cada um dos componentes sem a necessidade de passagem por parâmetros.

Para definirmos um contexto, devemos utilizar a função createContext():

// App.tsx

import React, { createContext } from "react";

const ThemeContext = createContext({ theme: "dark", toggleTheme: () => {} });

// Temos um contexto de dois parâmetros: variável theme, função toggleTheme, 
// que ainda não possui uma definição

function App() {
  const [theme, setTheme] = useState("dark");
  // Definição da variável theme

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };
  // Definição da função

  return (
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme,
      }}
    >
    </ThemeContext.Provider>
    
    // É nesse momento em que vamos colocar os parâmetros que desejamos 
    // como "globais" para todos os componentes que necessitem das props
  );
}

export default App;
export { ThemeContext };

//Navbar.tsx

import { useContext } from "react";

function Navbar() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  // Aqui chamamos as propriedades e as quebramos,
  // dessa forma, fica mais fácil de utilizá-las

  return (
    <>
      <button
        onClick={() => {
          toggleTheme();
          console.log(theme);
        }}
      >
        Click Me
      </button>
    </>
  );
}

useReducer

O hook useReducer permite gerenciar estados complexos. Ele é uma alternativa ao useState quando o estado é um objeto ou quando a lógica de atualização é mais complexa.

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...