Adicionar ganchos

2 minutos

Você pode usar o gancho de efeito para acompanhar o estado do seu aplicativo e executar o código em resposta às atualizações. Registramos a função que desejamos executar em resposta às alterações usando useEffect.

Cenário

Nosso aplicativo permite que o usuário toque em itens individuais para marcá-los como preparados. Se alguns itens ainda não estiverem preparados, desejamos exibir a mensagem Apenas continue a trabalhar. Quando todos os itens forem concluídos, queremos exibir Trabalho de preparação concluído!.

Vamos configurar esse comportamento adicionando um novo objeto de estado. Atualizaremos o objeto de nosso gancho de efeito.

Importante

Em nosso exemplo, modificamos o estado dentro de useEffect. Por padrão, o useEffect é executado sempre que qualquer objeto com estado é modificado. Esse comportamento pode criar um loop infinito. Nesse loop, modificamos o estado e o gancho é executado, o que modifica o estado, que executa o gancho e assim por diante.

Para evitar o loop infinito, podemos usar o parâmetro de dependência em useEffect para examinar apenas um objeto. Faremos isso quando criarmos nosso código.

Adicionar a nova propriedade de estado

Abra o arquivo App.jsx.
Para adicionar a nova propriedade de estado, insira o código a seguir abaixo da linha TODO: Add new state property.
```
// TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);
```

Adicionar o ouvinte do gancho de efeito

Para adicionar o ouvinte de gancho de efeito, insira o código a seguir abaixo da linha TODO: Add the effect hook.

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

O código usa setPrepared para atualizar prepared. Ele usa o método every, que retorna um valor booliano com base em cada item que corresponde aos critérios especificados. Em nosso caso, estamos verificando se cada item está preparado. Se não estiver, o método retornará false.

O segundo parâmetro em useEffect está definido como [recipe]. Essa configuração fornece a dependência para garantir que nosso código seja executado somente quando o objeto recipe for alterado.

Adicionar a exibição

Agora exiba a mensagem para o usuário se o preparo estiver concluído. Para fazer isso, adicione o código a seguir abaixo da linha TODO: Add the prep work display.

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

Observamos o objeto prepared. Se for verdadeiro, mostraremos o Trabalho de preparação realizado!. Caso contrário, exibiremos Apenas continue a trabalhar.

Testar a página