# Hooks

O react possibilita a criação de componentes. Mas e quando queremos que o html renderizado pelo componente seja atualizado junto com alguma variável do javascript? Nos componentes funcionais (sem ser feitos com classes), usamos os [hooks](https://reactjs.org/docs/hooks-reference.html).

### Um problema:

Queremos fazer um contador, onde sempre que um botão é clicado, um número que aparece na tela aumenta. Porém, podemos ver que isso não funciona:

```jsx
import { Container } from "./styles";

const Counter = () => {
	var count = 1;

	const handleCounterIncrement = () => {
		counter = counter + 1;
	};

	return (
		<Container>
			<p>Counter: {counter}</p>
			<button onClick={handleCounterIncrement}>Increment</button>
		</Container>
	);
};
export default Counter;
```

## useState

Função que recebe um estado inicial e retorna uma variável e um setter.

Serve para declarar variáveis com as quais se deseja sincronizar o conteúdo da página. Por exemplo:

```jsx
import { Container } from "./styles";
import { useEffect, useState } from "react";

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

	const handleCounterIncrement = () => {
		setCount(counter + 1);
	};

	return (
		<Container>
			<p>Count value = {count}</p>
			<button onClick={handleCounterIncrement}>Increment</button>
		</Container>
	);
};
export default Counter;
```

## useEffect

Função que recebe um callback (arrow function) e um array de dependências. Quando o componente for rerenderizado, se alguma das variáveis do array de dependências tiver mudado, o callback é executado.

Serve principalmente para sincronizar um efeito com alguma mudança de variável. Por [exemplo](https://codesandbox.io/s/hooks-demo-0otg5h):

```jsx
import { Container } from "./styles";
import { useEffect, useState } from "react";

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

	// acrescentando um efeito que é disparado na primeira renderização, e depois sempre que count muda:
	useEffect(() => {
		console.log(count);
		if (count === 1) {
			alert("count === 1 is true");
			// some logic
		}
	}, [count]);

	return (
		<Container>
			<p>Count value = {count}</p>
			<button onClick={() => setCount(count + 1)}>Increment</button>
		</Container>
	);
};
export default Counter;
```

Atenção: se o useEffect não tiver array de dependêcia, a partir do react 18, ele roda com a mudança de qualquer estado no componente, o que pode gerar um useEffect rodando infinitamente até crashar seu servidor.

## useContext

Serve para criar um contexto. Considere uma aplicação web inteira que é baseada num usuário logado. Usando o que conhecemos até agora, teríamos que guardar o usuário na raíz da aplicação e passar pra todos os filhos que precisam (praticamente todos) o usuário e funções (como a de login) por *props*. Mas e se pudéssemos fazer um estado global, acessível sem ser apenas pelas *props*? É exatamente isso que é o contexto.

Exemplos: <https://codesandbox.io/s/usecontext-demo-qtugvt?file=/src/contexts/UserContext.js> <https://www.youtube.com/watch?v=Zz4icNdPzTM>


---

# 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://struct.gitbook.io/struct/administracao-e-financeiro-develop/execucao/front-end/react-js/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.