Enquanto eu me lembro da colocação do React
Quando eu construo componentes do React , o que me deixa confuso é a re-renderização indesejada. Alguns componentes são renderizados novamente sem minhas intenções.
Ainda assim, eu li um truque para reduzir os problemas indesejados de re-renderização, não as melhores dicas, mas muito útil, é chamado de colocation . O que é aquilo? Pelo que entendi, o conceito principal é usar o estado o mais próximo possível do componente que o usa.
Mergulhe
Vamos mergulhar, eu crio 3 componentes super simples,
- App.js (como pai),
- FirstChild.js (como primeiro filho),
- e SecondComponent.js (como um segundo filho).
A imagem acima mostra que todos os componentes são renderizados, mesmo o <SecondChild /> que não usa o estado.
O que queremos não é renderizar o componente que não usa o estado . Usamos apenas o estado em <FirstChild /> apenas. Como podemos fazer isso? Ao mover o estado o mais próximo possível do componente, o usa. então vamos melhorar o código acima movendo o estado dentro
<App />
<FirstChild /> :
e mantenha o <SecondComponent /> inalterado.
Resultado
novamente, na primeira renderização, espera-se renderizar todos os componentes.
agora vamos digitar a entrada novamente
vê as diferenças? digitamos 5 letras e apenas re-renderizamos o log do console dentro do <FirstChild /> ! No entanto, o <SecondChild /> não renderiza novamente
Porque?
Lembre-se de que o react renderá novamente o componente e todos os filhos dentro dele se houver (há) mudança (ões) no (s) estado (ões) ou suporte (s). No primeiro exemplo acima, colocamos o estado no componente pai, portanto, quando digitamos, mesmo que houvesse componentes filhos que não usassem o estado, ele também seria renderizado porque o estado pai foi alterado.
Então, com base nessa teoria, mudamos o estado para o único componente que o usava. Ao fazer isso, o estado só mudou dentro do <FirstChild /> sem afetar o <SecondChild /> e o pai.
Dicas simples, mas úteis. 👌
referências:
- https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster
- https://kentcdodds.com/blog/colocation
Suggested posts
Encontrar informações sobre nomes de domínio
Um trecho de Small, Sharp Software Tools por Brian P. Hogan
Quando você faz uma solicitação para facebook.com, seu computador procura o nome de domínio para traduzir esse nome de domínio em um endereço IP para que seu computador possa fazer essa conexão.
Evitando as consequências devastadoras de um derrame: aprendendo com a jornada de uma família.
Introdução O AVC é uma emergência médica que pode atingir qualquer pessoa a qualquer momento. Ocorre quando o fluxo sanguíneo para uma parte do cérebro é interrompido, levando a uma perda repentina da função cerebral.
Related posts
Coletando OSINT para caçar ameaças
Olá, entusiastas cibernéticos! Bem-vindo de volta ao OSINT para a série de caça a ameaças. No primeiro artigo, apresentei uma visão geral do OSINT e sua importância na caça às ameaças.
O assassinato de Jordan Neely e o problema do racismo “patriótico”
Os EUA podem dar o passo essencial de não igualar comportamento racista a ser um bom americano?
[Alerta de gatilho: este ensaio inclui capturas de tela de pessoas elogiando o assassino de Jordan Neely.] Os policiais finalmente - e talvez com relutância - acusaram Daniel Penny, o homem que sufocou Jordan Neely até a morte, por aquele homicídio.
A Mentira do Cowboy
Como as megacorporações venderam aos americanos uma mentira robusta
É uma manhã brilhantemente dourada nas colinas do oeste, enquanto os primeiros raios de sol iluminam a grama congelada nas planícies. Um rebanho de gado Angus plácido, preto e maciço, é recortado contra o nascer do sol enquanto segue por uma trilha batida até um local que todos conhecem bem; a barra de café da manhã.
Conversas Perigosas
Se quisermos continuar a prosperar neste planeta, teremos que ter conversas perigosas. Aqueles que desafiam o que temos feito, o que estamos fazendo e o que estamos determinados a continuar fazendo (ou planejamos fazer).