Por que não devemos utilizar estruturas condicionais ou estruturas de repetições nos Hooks 🤚

Inicialmente você deve ter isso em mente:

1. Todo componente no React é uma função!
2. Toda função possuí propriedades e hooks!
3. Quando uma propriedade ou hook é alterado, é disparado um novo ciclo do React, no qual será acionado uma nova renderização.

Vamos utilizar o useState como exemplo

function MinhaFunção() {
	let isNumber

	const [number, setNumber] = useState(1);
	const [isModalOpen, setIsModalOpen] = useState(true);

	if (isModalOpen) {
		[isNumber] = useState(true)
	}
}

• No funcionamento interno do React, todos dados dos Hooks são passados de forma ordenada como argumentos de nossa função, ocasionando uma renderização.

De forma mais clara, irei representar como o React trabalha com isso.

function MinhaFunção(props, primeiroEstado, SegundoEstado, TerceiroEstado)

Traduzindo para nosso exemplo:

function MinhaFunção(props, 1, true, true)

Se por acaso o segundo estado mudar de valor para false, a condição do if não será atendida. Então, o react receberá os seguintes valores dos hooks no argumento da função:

function MinhaFunção(props, 1, false)

• Percebeu que um estado sumiu? Devido esse desaparecimento do estado, o React lançará um erro. É uma forma do React perguntar: "Poh, tinha um estado aqui antes, mas agora ele sumiu. Cadê ele???"

Resumo

---

• Em suma, o React valoriza a ordem dos dados que foram passados como argumento da função. Por isso que não devemos utilizar condicional ou estruturas de repetições com Hook, já que essas estruturas podem modificar a ordem que hooks são chamados.