> For the complete documentation index, see [llms.txt](https://uclsanca.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uclsanca.gitbook.io/learn/web-avancado/reactjs/estados-e-hooks.md).

# 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:

```jsx
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:

```jsx
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.

<figure><img src="/files/gXNgx4ScyMTOf1IvVxUn" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/4ZFYzWtV6Nms8QxHeY2Y" alt=""><figcaption></figcaption></figure>

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():

```jsx
// 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 };
```

```jsx
//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.

```jsx
import { useReducer } from 'react';

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

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