Como usar o estado em componentes funcionais do React

Os componentes do React podem possuir “ estado interno, ” um conjunto de pares de valores-chave que pertencem ao componente. Quando o estado muda, o React renderiza novamente o componente. Historicamente, o estado só pode ser usado em componentes de classe. Usando ganchos, você pode aplicar estado a componentes funcionais também.

A abordagem tradicional

Os componentes da classe React têm uma propriedade de estado que mantém seu estado. Eles fornecem um método setState () que você pode usar para atualizar o estado, disparando uma nova renderização.

a classe MyComponent estende React. Component & # 123;   estado = & # 123; valor: 1 & # 125 ;;   this. updateState = & # 40; & # 41; = > this. setState & # 40; & # 123; valor: & # 40; this. state. value + 1 & # 41; & # 125; & # 41 ;;   renderizar & # 40; & # 41; & # 123; return & # 40; < div > < p > & # 123; this. state. value & # 125; < / p > < botão onClick = & # 123; this. updateState & # 125; Valor de incremento < / button > < / div > & # 41 ;; & # 125;   & # 125;

Neste exemplo, o texto renderizado sempre mostrará o número no estado do componente. Clicar no botão aumentará o valor.

Convertendo em um componente funcional

Com um componente tão simples, seria ideal reescrever isso como um componente funcional. Para fazer isso, você precisará usar o gancho useState (). Ganchos foram adicionados no React 16.8; antes deste lançamento, não havia mecanismo para adicionar estado aos componentes funcionais.

Aqui está a aparência do componente acima como um componente funcional:

import React, & # 123; useState & # 125; de? reagir ?;   const MyComponent = & # 40; & # 41; = > & # 123; const & # 91; value, setValue & # 93; = useState & # 40; 1 & # 41 ;; return & # 40; < div > < p > & # 123; valor & # 125; < / p > < botão onClick = & # 123; & # 40; & # 41; = > setValue & # 40; & # 40; value + 1 & # 41; & # 41; & # 125; > Valor de incremento < / button > < / div > & # 41 ;; & # 125 ;;

Este é mais curto e legível do que o original baseado em classe. Ao contrário do componente de classe, você não pode acessar uma propriedade de instância de estado ou método setState (). Em vez disso, useState () é chamado para configurar o estado e obter uma função atualizadora.

Anatomia do gancho useState ()

Ganchos são um recurso React que permite “ enganchar ” funcionalidade em componentes funcionais. Como as funções são puras e não têm instâncias, os recursos que foram implementados originalmente como métodos de classe React. Component não podem ser usados ​​diretamente. Os ganchos permitem adicionar esses recursos aos componentes sem precisar convertê-los em classes.

O gancho useState () configura uma propriedade de estado individual. Ele retorna uma matriz contendo dois elementos: o valor do estado atual e uma função que você pode chamar com um novo valor para atualizar o estado.

No exemplo, estamos usando a atribuição de desestruturação do array para descompactar os valores do array em variáveis ​​claramente nomeadas. Por convenção, o método setter deve ser prefixado com set, uma vez que ocupa o lugar do método de classe setState ().

Chamar useState () declara uma variável de estado, valor em nosso caso, que será “ preservada ” entre chamadas de função. Isso significa que useState () tem a garantia de retornar o mesmo valor cada vez que você chamá-lo em seu componente. Qualquer outro valor de variável é perdido assim que uma função é encerrada; O React mantém os valores de estado internamente para garantir que você receba o mesmo de volta toda vez que sua função for executada.

Atualizando o estado

A função de atualização de estado é apenas uma função regular. É usado no manipulador onClick para substituir o valor do estado atual. O tratamento interno de valores de estado do React garante que seu componente será renderizado novamente. useState () fornecerá o novo valor, fazendo com que a mudança de estado seja efetuada.

Há uma diferença importante em comparação com o setState () dos componentes da classe: os atualizadores de estado funcional substituem o estado, enquanto o setState () faz uma fusão superficial:

const & # 91; value, setValue & # 93; = useState & # 40; & # 123; foo: " bar & quot ;, test: & # 123; example: " demo " & # 125; & # 125; & # 41 ;; setValue & # 40; & # 123; foo: " foobar " & # 125; & # 41 ;; // Resultados em   this. state = & # 123; foo: " bar & quot ;, teste: & # 123; exemplo: " demo " & # 125; & # 125 ;; this. setState & # 40; & # 123; foo: " foobar " & # 125; & # 41 ;; // Resultados em};

Em vez de passar um novo valor de estado diretamente, você também pode entregar uma função para atualizadores de estado. As funções recebem o estado atual como um parâmetro e devem retornar o novo valor do estado. Isso é útil ao trabalhar com valores alternáveis.

const Checkbox = & # 40; & # 41; = > & # 123; const & # 91; verificado, setChecked & # 93; = useState & # 40; false & # 41 ;; const toggle = anterior = >! anterior ; retornar < entrada marcada = & # 123; verificada & # 125; onClick = & # 123; & # 40; & # 41; = > setChecked & # 40; toggle & # 41; & # 125; / & gt ;; & # 125 ;;

Isso ajuda a reutilizar a lógica de alternância em vários lugares do seu componente.

Valores padrão

Há mais um ponto a ser observado sobre useState (). O próprio gancho aceita um parâmetro que define o valor inicial da variável de estado. No exemplo acima, o valor será inicializado com 1. Quando você não especifica um valor, undefined é usado. Isso corresponde ao comportamento ao configurar a propriedade de instância de estado em um componente de classe.

Se você passar uma função para useState (), o React a chamará e usará seu valor de retorno como o valor de estado inicial.

const MyComponent = & # 40; & # 41; = > & # 123; const initialState = & # 40; & # 41; = > 1; const & # 91 ; valor, setValue & # 93; = useState & # 40; initialState & # 41 ;; & # 125 ;;

Esta técnica permite “ preguiçoso ” inicialização de estado. A função não será chamada até que o React esteja realmente pronto para configurar o estado.

Usar uma função também garante que o valor do estado inicial seja calculado apenas uma vez. Isso é importante se a determinação do seu estado inicial exigir um cálculo caro – se você passá-lo diretamente, o valor será calculado sempre que o componente for renderizado, em comparação com uma vez na primeira renderização se você passar uma referência a uma função.

const MyComponent = & # 40; & # 41; = > & # 123; const doSomethingExpensive = & # 40; & # 41; = > & # 123; / / ... & # 125; const & # 91; value, setValue & # 93; = useState & # 40; doSomethingExpensive & # 40; & # 41; & # 41 ;; const & # 91; value, setValue & # 93; = useState & # 40 ; doSomethingExpensive & # 41 ;; & # 125 ;;

A diferença sutil, mas significativa, nas duas chamadas useState () ilustra a potencial melhoria de desempenho. A primeira linha executaria a operação cara em cada chamada de renderização, mesmo se fosse redundante porque o estado já foi inicializado. Isso não ocorreria no segundo caso.

Usando vários valores de estado

Você tem algumas opções ao usar vários valores de estado em um único componente funcional. Você pode reverter para um sistema semelhante a uma classe, usando um único objeto armazenado no estado:

const MyComponent = & # 40; & # 41; = > & # 123; const & # 91; user, setUser & # 93; = useState & # 40; & # 123; id: 1, username: " foobar " & # 125; & # 41 ;; & # 125 ;;

Você precisa ter certeza de chamar setUser () com o objeto de usuário atualizado. A sintaxe de propagação é útil da mesma forma que os componentes de classe:

setUser & # 40; & # 123; ... usuário, nome de usuário: " exemplo " & # 125; & # 41 ;;

Isso cria um novo objeto com as propriedades existentes do usuário. Em seguida, ele atualiza a propriedade de nome de usuário com seu novo valor. É importante que você crie um novo objeto, em vez de transformar diretamente o objeto existente, para que a reconciliação de estado do React possa identificar a mudança.

Como alternativa, você pode chamar useState () várias vezes para configurar variáveis ​​de estado exclusivas para cada item. Freqüentemente, essa é a abordagem preferida para componentes funcionais. Isso pode facilitar a atualização de valores de estado individuais.

const MyComponent = & # 40; & # 41; = > & # 123; const & # 91; userId, setUserId & # 93; = useState & # 40; 1 & # 41; ; const & # 91; username, setUsername & # 93; = useState & # 40; " foobar " & # 41 ;; & # 125 ;;

As propriedades com estado agora têm suas próprias variáveis ​​de estado e funções de atualização.

Conclusão

O gancho useState () do React torna os componentes funcionais mais poderosos, permitindo que eles possuam estado. Você pode definir um valor inicial, acessar o valor atual com a garantia de que ele persistirá entre as novas renderizações e atualizar o estado usando uma função especialmente fornecida.

Componentes funcionais com estado geralmente são mais rápidos de escrever do que seus equivalentes baseados em classe. Além disso, eles podem tornar mais óbvio o que está acontecendo em sua base de código, já que as referências a state e setState () são eliminadas em favor de nomes de variáveis ​​claros. Em última análise, useState () fornece flexibilidade e significa que você não precisa mais converter componentes funcionais em componentes de classe no momento em que você precisa de estado.