Você não precisa sempre criar um estado no React!! 🤯
Olá, sou o Kadu e hoje venho tentar passar um conhecimento sobre o state do React!
Hoje finalizei um projeto em grupo onde tinha uma página que precisava que um botão estivesse desabilitado, dependendo do Estado de um elemento da página.
function App() {
const [texto, setTexto] = useState('OK');
const toggleTexto = (value) => setStatus(value)
return (
<>
<h1>{texto}</h1>
<div>
<button type="button" onClick={() => toggleTexto('OK')}>OK</button>
<button type="button" onClick={() => toggleTexto('Não OK')}>Não OK</button>
</div>
<button>Enviar</button>
</>
);
}
Esse componente é um exemplo do que quero explicar, o desfio era simples o botão tinha que está desabilitado quanto o estado estivesse 'OK', e desabilitado quando não estivesse 'OK'.
Foi aí que minha parceira de grupo já estava indo fazer um novo State para armazenar valor de quando o botão pode ficar habilitado, deixando o código mais ou menos assim.
function App() {
const [texto, SetTexto] = useState("OK");
const toggleTexto = (value) => SetTexto(value);
const [buttonDisabled, setButtonDisabled] = useState(true);
useEffect(() => {
texto === "OK" ? setButtonDisabled(false) : setButtonDisabled(true);
}, [texto]);
return (
<>
<h1>{texto}</h1>
<div>
<button type="button" onClick={() => toggleTexto("OK")}>
OK
</button>
<button type="button" onClick={() => toggleTexto("Não OK")}>
Não OK
</button>
</div>
<button disabled={buttonDisabled}>Enviar</button>
</>
);
}
Se você comentou que o problema era as renderizações, você está certo! Uma coisa que pode deixar sua aplicação lenta são várias renderizações feitas desnecessariamente e se você conhece bem o react, sabe que toda alteração de 'ESTADO!' causa uma nova renderização.
Então se contarmos teremos duas atualizações no componente, a 1.º quando clicar no botão 'OK' ou 'Não OK' e o estado do texto muda e isso faz com que a função useEffect seja chamada e atualizando novamente o componente quando mudarmos o estado do botão de enviar, isso em uma aplicação grande pode ser um problema, mas no nosso caso não era, mas quiz passar esse conhecimento parar o meu grupo!
Então se for contar teremos duas atualização no componente, a 1° quando clicar no botão e o status do texto muda e isso faz como a função o useEffect ceja chamada e atualizando novamente o compomenete quando mudarmos o status do botão ativo, isso em uma aplicação grande pode ser um problema.
E como corrigimos isso? 😕
Componentes funcionais trouxeram o poder de tornar as coisas mais simples e uma delas é criar variáveis dentro da função do componente e é com isso que resolveremos o problema, ficando assim o componente ⬇️.
export default function App() {
const [texto, SetTexto] = useState("OK");
const toggleTexto = (value) => SetTexto(value);
const buttonDisabled = texto === "Não OK";
return (
<>
<h1>{texto}</h1>
<div>
<button type="button" onClick={() => toggleTexto("OK")}>
OK
</button>
<button type="button" onClick={() => toggleTexto("Não OK")}>
Não OK
</button>
</div>
<button disabled={buttonDisabled}>Enviar</button>
</>
);
}
Percebam que não mudou muita coisa, somente retiramos o useEffect e em vez de um estado craimos uma com constante para armazenar o valor se o botão está ativo ou não. e sempre que alteramos o estado do texto a constante buttonDisabled vai ser recalculada e desabilitando o botão corratemente sem gerar uma nova renderização do componente. 😄
FIM
Espero que tenham entendido e qualquer dúvida deixe seu comentário. Estou sempre aberto para novos aprendizados, então se tiver outra opinião ou algo a acrescentar só comentar também.
Eu não sei se essa abordagem tem um nome e nem de onde eu tirei isso mas acho que algo muito valido a se fazer e envitando de usar um Estado desnecessairiamente.
Contatos:
GitHub: https://github.com/kaduh15
LinkedIn: https://www.linkedin.com/in/kaduh15/