Criar os estados globalmente pode diminuir o desempenho do seu aplicativo. Saiba como você pode criar e utilizar estados de forma eficaz em seu aplicativo React.

Se você escreveu muito código React, é provável que tenha usado o estado incorretamente. Um erro comum que muitos desenvolvedores React cometem é armazenar estados globalmente no aplicativo, em vez de armazená-los nos componentes onde são usados.

Saiba como você pode refatorar seu código para utilizar o estado local e por que fazer isso é sempre uma boa ideia.

Exemplo básico de estado em React

aqui está um muito aplicação de contador simples que exemplifica como o estado é normalmente tratado no React:

importar {useState} de'reagir'
importar {Contador} de'contador'
funçãoAplicativo(){
const [count, setCount] = useState(0)
retornar<Contadorcontar={contar}setCount={setCount} />
}
exportarpadrão Aplicativo

Nas linhas 1 e 2, você importa o useState() gancho para criar o estado, e o Contador componente. Você define o contar estado e setCount método para atualizar o estado. Então você passa ambos para baixo para o Contador componente.

O Contador componente, em seguida, renderiza o contar e chamadas setCount para aumentar e diminuir a contagem.

funçãoContador({contar, definirContagem}) {
retornar (

Você não definiu o contar variável e setCount funcionar localmente dentro do Contador componente. Em vez disso, você o passou do componente pai (Aplicativo). Em outras palavras, você está usando um estado global.

O problema com os Estados globais

O problema de usar um estado global é que você está armazenando o estado em um componente pai (ou pai de um pai) e então passando-o como adereços para o componente onde esse estado é realmente necessário.

Às vezes, isso é bom quando você tem um estado compartilhado por vários componentes. Mas, neste caso, nenhum outro componente se preocupa com o contar estado, exceto para o Contador componente. Portanto, é melhor mover o estado para o Contador componente onde ele é realmente usado.

Movendo o estado para o componente filho

Quando você move o estado para o Contador componente, ficaria assim:

importar {useState} de'reagir'
funçãoContador() {
const [count, setCount] = useState(0)
retornar (

Então dentro do seu Aplicativo componente, você não precisa passar nada para o Contador componente:

// importa
funçãoAplicativo(){
retornar<Contador />
}

O contador funcionará exatamente da mesma forma que antes, mas a grande diferença é que todos os seus estados estão localmente dentro deste Contador componente. Portanto, se você precisar de outro contador na página inicial, terá dois contadores independentes. Cada contador é independente e cuida de todo o seu próprio estado.

Manipulando o estado em aplicativos mais complexos

Outra situação em que você usaria um estado global é com formulários. O Aplicativo componente abaixo passa os dados do formulário (e-mail e senha) e o método setter para o Forma de login componente.

importar { useState } de"reagir";
importar { Forma de login } de"./Forma de login";
funçãoAplicativo() {
const [formData, setFormData] = useState({
 e-mail: "",
 senha: "",
 });


funçãoatualizarFormData(novos dados) {
 setFormData((anterior) => {
retornar { ...anterior, ...novosdados };
 });
 }


funçãoao enviar() {
console.log (formData);
 }
retornar (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

O Forma de login O componente recebe as informações de login e as processa. Quando você envia o formulário, ele chama o atualizarDados função que também é transmitida do componente pai.

funçãoForma de login({ onSubmit, data, updateData }) {
funçãomanipularEnviar(e) {
 e.preventDefault();
 onSubmit();
 }
retornar (

Em vez de gerenciar o estado no componente pai, é melhor mover o estado para LoginForm.js, que é onde você usará o código. Isso torna cada componente independente e não dependente de outro componente (ou seja, o pai) para obter dados. Aqui está a versão modificada do Forma de login:

importar { useRef } de"reagir";
funçãoForma de login({ onSubmit }) {
const emailRef = useRef();
const senhaRef = useRef();

funçãomanipularEnviar(e) {
 e.preventDefault();
 onSubmit({
 e-mail: emailRef.current.value,
 senha: passwordRef.current.value,
 });
 }
retornar (

Aqui você vincula a entrada a uma variável usando ref atributos e o useRef React hook, em vez de passar os métodos de atualização diretamente. Isso ajuda a remover o código detalhado e otimize o desempenho do formulário usando o hook useRef.

No componente pai (App.js), você pode remover o estado global e atualizarFormData() método porque você não precisa mais dele. A única função que resta é onSubmit(), que você chama de dentro do Forma de login componente para registrar os detalhes de login no console.

funçãoAplicativo() {
funçãoao enviar(formData) {
console.log (formData);
 }
retornar (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Você não apenas tornou seu estado o mais local possível, mas também removeu a necessidade de qualquer estado (e usou referências em vez de). Então seu Aplicativo componente ficou significativamente mais simples (tendo apenas uma função).

Seu Forma de login O componente também ficou mais simples porque você não precisava se preocupar em atualizar o estado. Em vez disso, você apenas acompanha dois referências, e é isso.

Manipulando Estado Compartilhado

Há um problema com a abordagem de tentar tornar o estado o mais local possível. Muitas vezes, você se depara com cenários em que o componente pai não usa o estado, mas o passa para vários componentes.

Um exemplo é ter um TodoContainer componente pai com dois componentes filhos: Lista de afazeres e TodoCount.

funçãoTodoContainer() {
const [todos, setTodos] = useState([])
retornar (
 <>


 </>
 )
}

Esses dois componentes filhos requerem o todos estado, então TodoContainer passa para os dois. Em cenários como esses, você deve tornar o estado o mais local possível. No exemplo acima, colocando-o dentro do TodosContainer é o mais local possível.

Se você colocasse esse estado em seu Aplicativo componente, não seria o mais local possível porque não é o pai mais próximo dos dois componentes que precisam dos dados.

Para grandes aplicações, gerenciar o estado apenas com o useState() gancho pode revelar-se difícil. Nesses casos, você pode precisar optar pelo API de contexto de reação ou Reagir Redux administrar o estado com eficácia.

Saiba mais sobre React Hooks

Hooks formam a base do React. Ao usar ganchos no React, você pode evitar escrever códigos longos que, de outra forma, usariam classes. O gancho useState() é indiscutivelmente o gancho React mais comumente usado, mas existem muitos outros, como useEffect(), useRef() e useContext().

Se você deseja se tornar proficiente no desenvolvimento de aplicativos com o React, precisa saber como usar esses ganchos em seu aplicativo.