State Derivation é uma técnica que envolve a criação de novos valores de estado com base em um estado atual, em vez de armazenar novos valores diretamente no estado do componente.
O uso de State Derivation pode ajudar a manter seu código organizado, simplificar a lógica de negócios e melhorar a experiência do usuário, reduzindo o tempo de resposta do aplicativo.
Sem State Derivation
O componente Login utiliza o hook useState para controlar o estado dos campos do formulário e o hook useEffect para monitorar alterações em firstName e lastNamee atualizar fullName.
Como consequência da atualização do estado, a função de renderização do componente é executada novamente, fazendo com que a interface do usuário seja atualizada. Portanto, sempre que firstName, lastName ou fullName são atualizados, o componente é renderizado novamente.
React sem State Derivation (codepen.io)
Com State Derivation
O componente Login utiliza o hook useState para controlar os estados de firstName e lastName. Em vez de utilizar um segundo hook para atualizar fullName, o valor é calculado diretamente dentro da função de renderização, sem o uso de um hook adicional.
Dessa forma, é possível reduzir a quantidade de renderizações do componente, uma vez que a atualização de fullName não provoca uma nova renderização. Essa abordagem é possível devido ao fato de que fullName é um valor calculado a partir de firstName e lastName, não necessitando de um estado separado para ser armazenado.
React com State Derivation (codepen.io)
Em certos contextos, é possível diminuir ainda mais a renderização dos componentes. Confira o seguinte artigo: "Quando não utilizar estados no React".
Top comments (0)