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.

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:

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:

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:

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