Hooks
Ganchos são um padrão comum em estruturas onde os valores mudam ou outros eventos ocorrem. De forma centralizada, eles injetam seu próprio código para ser executado quando o estado muda ou em outros estágios do 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 do estado é definido. Ele é aumentado quando o valor inicial e todas as atualizações subsequentes são definidos.
O gancho de efeito permite que você execute código em resposta à configuração do valor. O código que você executa pode ter efeitos colaterais, para que você possa atualizar os 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 uma forma complexa que inclui muitos valores. Normalmente, você deve desabilitar o botão Enviar até que os dados que precisam ser enviados para o 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 do servidor.
Você não gostaria que cada ouvinte de eventos examinasse o estado para ver se os dados estão prontos para serem enviados ao servidor. Esta 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á ativar o botão Enviar .
useEffect
Para registrar um ouvinte para o Gancho de efeito, use useEffect. useEffect Aceita uma função sem parâmetros para ser executada quando o estado é alterado.
useEffect(() => {
// code goes here
});
Por padrão, useEffect é executado sempre que o estado é alterado em qualquer objeto com monitoração de estado. Você pode fornecer uma dependência para habilitar o Gancho apenas para um grupo específico de objetos.
useEffect(() => {
// code goes here
}, [ someStatefulObject ]);