Ganchos
Os ganchos são um padrão comum em estruturas em que os valores mudam ou outros eventos ocorrem. De uma forma centralizada, eles injetam o seu código para ser executado quando o estado é alterado ou em outros estágios no ciclo de vida de um aplicativo.
Gancho de efeito
Nesta unidade, vamos nos concentrar no gancho de efeito. Esse gancho é gerado sempre que o valor de estado é definido. Ele é gerado quando o valor inicial e todas as atualizações subsequentes são definidas.
O gancho de efeito permite que você execute o código em resposta à configuração do valor. O código executado pode ter efeitos colaterais, portanto, você pode atualizar valores conforme necessário.
Quando usar o gancho de efeito
Você pode usar o gancho de efeito sempre que precisar centralizar o código para responder a uma alteração de estado. Imagine um formulário complexo que inclui muitos valores. Normalmente, você deve desabilitar o botão Enviar até que os dados que precisam ser enviados ao servidor estejam em um estado válido. Digamos que você tenha eventos para valores individuais que são alterados nos dados. Depois que um usuário seleciona um país/região em seu aplicativo, você precisa recuperar uma lista de províncias no servidor.
Você não quer que cada ouvinte de eventos examine o estado para ver se os dados estão prontos para serem enviados para o servidor. Essa configuração seria ineficiente. Em vez disso, você pode usar um gancho de efeito. Um gancho de efeito pode criar uma função que examina os dados. Se os dados estiverem em um estado válido, ele poderá habilitar o botão Enviar.
useEffect
Para registrar um ouvinte para o gancho de efeito, use useEffect. useEffect aceita que uma função sem parâmetro seja executada quando o estado é alterado.
useEffect(() => {
// code goes here
});
Por padrão, o useEffect é executado sempre que o estado é alterado em qualquer objeto com estado. Você pode fornecer uma dependência para habilitar o gancho apenas para um grupo específico de objetos.
useEffect(() => {
// code goes here
}, [ someStatefulObject ]);