# 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 });
  // ...
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://uclsanca.gitbook.io/learn/web-avancado/reactjs/estados-e-hooks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.