Regras dos React Hook
Regra 1: Utilizar Hooks apenas em níveis superiores
Os Hooks devem ser utilizados apenas em componentes de nível superior, ou seja, não dentro de loops, condições ou funções aninhadas. Isso garante que os Hooks sejam chamados de maneira consistente em cada renderização do componente.
// Bom
function MeuComponente() {
const [estado, setEstado] = useState(0);
useEffect(() => {
// lógica de efeito
}, []);
return <div>{estado}</div>;
}
// Ruim
function MeuComponente() {
if (condicao) {
const [estado, setEstado] = useState(0); // Erro: Hook chamado dentro de uma condição
}
return <div>{estado}</div>;
}Regra 2: Utilizar Hooks apenas em componentes funcionais
Os Hooks devem ser utilizados somente em componentes funcionais ou em componentes personalizados que são baseados em funções. Não é permitido utilizá-los em classes.
// Bom
function MeuComponente() {
const [estado, setEstado] = useState(0);
return <div>{estado}</div>;
}
// Ruim
class MinhaClasse extends React.Component {
componentDidMount() {
const [estado, setEstado] = useState(0); // Erro: Hook chamado em um contexto não funcional
}
render() {
// ...
}
}
Regra 3: Utilizar Hooks na ordem correta
Ao utilizar múltiplos Hooks em um componente funcional, é importante chamá-los sempre na mesma ordem. Isso garante que a correspondência entre os Hooks e seus respectivos estados seja mantida corretamente.
// Bom
function MeuComponente() {
const [estado, setEstado] = useState(0);
const [dados, setDados] = useState([]);
// ...
return <div>{estado}</div>;
}
// Ruim
function MeuComponente() {
const [dados, setDados] = useState([]);
const [estado, setEstado] = useState(0); // Erro: alteração na ordem dos Hooks
// ...
return <div>{estado}</div>;
}
Regra 4: Regras específicas de alguns Hooks
Alguns Hooks têm regras específicas adicionais. Por exemplo, o Hook useEffect exige uma função de retorno de chamada para realizar a limpeza quando o componente é desmontado.
// Bom
useEffect(() => {
// Lógica de efeito
return () => {
// Lógica de limpeza
};
}, [dependencias]);
Regra 5: Nomear Hooks personalizados com “use”
Quando criamos Hooks personalizados, é uma prática comum nomeá-los começando com “use” para evitar conflitos de linting e para indicar que são Hooks.
// Bom
function useMeuHook() {
// ...
}
// Ruim
function meuHook() {
// ...
}