Renderização no ReactJS: Como funciona e o que você deve saber?

Рет қаралды 3,090

18 күн бұрын

👉 Vídeo complementar:
• O hook mais complexo d...
---
Faça parte dessa comunidade, seja MEMBRO DO CANAL! 👊🚀
Isso me ajuda demais a continuar trazendo conteúdo de qualidade! Muito obrigado de coração ♥️
---
O uso de Hooks revolucionou a forma como o React lida com o processo de renderização.
Com Hooks como o useState e o useEffect, é possível gerenciar o estado local dos componentes e controlar os ciclos de vida de forma mais intuitiva.
Porém, entender quando um componente renderiza (ou re-renderiza) no ReactJS é crucial para criar aplicações mais escaláveis e evitar problemas difíceis de debugar.
---
✅ Curso de Next.js 13:
hotm.art/lA0ujDcw
📷 Segue lá no Instagram:
/ devjunioralves
💭 Participe da nossa comunidade no Discord:
/ discord
🧑‍💻 Repositório do canal:
github.com/jjunior96/dev-juni...
---
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
Signals no React.js?!
• Signals no React.js?!
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑‍💻 Blog: www.devjuniorplus.com.br
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jjunior96
📷 Instagram: / devjunioralves
👨‍💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.
Aqui, compartilho conteúdo sobre React.js, Next.js, TypeScript, JavaScript, testes, livros, SOLID e tudo mais relacionado à desenvolvimento de software.
✉️ Email comercial
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #nextjs #typescript

Пікірлер: 25

@devjunioralves 16 күн бұрын

📚 Clean Code amzn.to/3hHXVKY 📚 Estruturas de dados e algoritmos com JavaScript amzn.to/49FOzFd --- ✅ Segue lá no Instagram: instagram.com/devjunioralves/ ✅ Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

@TTX8000 16 күн бұрын

ótimo vídeo 👏🏻 pfvr, continue trazendo vídeos mais teóricos sobre o reactjs... tem sido muito bom

@devjunioralves 16 күн бұрын

Valeu demais, vou continuar sim! 👊

@jheanbrizadao2429 16 күн бұрын

valeu, man

@Jean-wj4tn 14 күн бұрын

Boa noite, gostaria de trazer um ponto. Na documentação do React na parte "Render and Commit" diz que só existem 2 situações pra um componente renderizar: 1 - É a primeira renderização do componente (acionado pelo método render do nó root do ReactDOM) 2 - Quando o estado de um componente ou o estado de um ancestral muda. Caso um componente fosse renderizado novamente quando uma prop muda, então não haveria necessidade de usar um estado para manter valores entre renderização, pois os componentes filhos sempre iriam refletir as novas props passadas. Um componente só vai renderizar novamente (se essa não for a renderização inicial) caso o estado de um pai na árvore for alterado.

@victorhugorosafonseca3243 16 күн бұрын

fazendo dessa forma eu ainda preciso do onChange? Coloca um console log qndo submeter o formulario pra ver o que chega

@maycondouglas3179 11 күн бұрын

Junior, no next qual seria a melhor forma de fazer uma paginação ? Usando a URL para fazer a comunicação entre os componentes(como na hr da paginação e busca) mas aí a cada vez que mudar a url a página completa será renderizada correto ? Ou a melhor maneira seria usando um contextAPI ?

@Tomita84 16 күн бұрын

Duvida: pra esse caso (x, y : Props), ok ... Mas e se for um (account, person : UserAccounts), também funciona ?? Teria alguma implementação diferente qdo puxa um tipo externo ?

@user-xp6wf8kk3p 15 күн бұрын

Não seria a mesma coisa retirar o useState que está recebendo as props e mandala direto no value? value={name} e value={username}?

@devjunioralves 15 күн бұрын

Nesse caso sim, mas em uma situação que precise atualizar esses valores, aí seria necessário algo a mais, como um useState, ou passar essas informações para um hook form e etc

@eduardooliveira5257 16 күн бұрын

se o useState tá no topo do componente faz sentido ele ser executado primeiro

@devjunioralves 14 күн бұрын

Não necessariamente, o useState poderia ter sido declarado depois de funções que funcionaria.

@marcelo55850 16 күн бұрын

caso eu tenha minha pagina que faz uma req e eu uso os dados dessa req em 1 dos meus 5 componentes que a pagina renderiza. eu preciso usar esses dados em apenas 1 dos componentes, como evito a renderização desnecessaria dos outros 4 ?

@emersonsilva7118 16 күн бұрын

Faz a requisição dentro do componente específico

@devjunioralves 16 күн бұрын

Uma solução é como o Emerson disse. Outra solução, poderia utilizar o compound pattern, onde você vai compondo seus componentes via props. Tem vídeo aqui no canal sobre, vale a conferida!

@silvanopimentel7270 16 күн бұрын

Mas os Lazy Initializers não executam apenas na etapa de montagem do componente? E quando se fala sobre re-renderizar não estamos falando da etapa de atualização do componente? Então como é possível os dados contidos em data estarem sempre atualizados?

@CarlosSilva-hy8xt 16 күн бұрын

o estado altera, a prop passada vai ser alterada, então o componente que recebeu a prop entra em estado de montagem novamente e executa a atualização de estado.

@silvanopimentel7270 16 күн бұрын

@@CarlosSilva-hy8xt Acredito que estou fazendo algo errado então, pois realizando alguns testes, quando eu alterado a prop passada, o estado interno do componente não é atualizado, poderia me dizer o que há de errado com o código a seguir? Quando eu clico no botão de atualizar o nome apenas o estado do componente pai (App) é alterado, não sendo refletido no filho (Component). import React from 'react'; export function App(props) { const [user, setUser] = React.useState({ name: 'Teste', username: 'teste123', password: '321' }); return ( {JSON.stringify(user)} setUser({ ...user, name: 'Novo' })}>Alterar nome ); } export function Component({ name, username }) { const [data, setData] = React.useState(() => ({ name, username })); return ( {JSON.stringify(data)} ); }

@IgorAlves15 16 күн бұрын

@@CarlosSilva-hy8xt Eu fiz um teste aqui colocando um input no pai para alterar o estado de um campo que vai ser passado como prop. Quando eu atribuo essa prop ao estado do filho, ao montar é utilizado as informações que vieram da prop. Porém se eu mudar o estado do pai, o estado do filho não é alterado. Da uma olhada no exemplo: ``` import { useState } from 'react' type User = { name: string idade: number } type TesteProps = { idade: number name: string } export function Teste({ idade, name }: TesteProps) { const [state, setState] = useState({ name, idade }) return ( Pai - {name} - {idade} {state.name} - {state.idade} setState((user) => ({ ...user }))}> Alterar idade ) } ``` ``` import { useState } from 'react' import { Teste } from './Teste' export function Teste02() { const [name, setName] = useState('Igor') return ( setName(event.target.value)} /> ) } ```

@silvanopimentel7270 16 күн бұрын

@@CarlosSilva-hy8xt Acredito que estou fazendo algo errado então, fiz alguns testes e esse valor não atualizava, pode me dizer qual o problema do código a seguir? Quando clico no botão ele apenas atualiza o estado do componente pai (App), mas o estado do componente (Component) não é alterado: import React from 'react'; export function App(props) { const [user, setUser] = React.useState(() => ({ user: 'Teste', email: 'test@mail.com', password: '1234' })); return ( {JSON.stringify(user)} setUser({ ...user, name: 'Novo' }}>Alterar nome ); } export function Component({ user, password }) { const [data] = React.useState(() => ({ user, password })); return ( {JSON.stringify(data)} ); }

@silvanopimentel7270 16 күн бұрын

@@CarlosSilva-hy8xt Não sei se os outros comentários apareceram ai, enviei duas vezes porem não esta mostrando aqui, mas durante os testes que fiz, quando um componente pai tem um estado e passa ele como props para um componente filho, e nesse componente filho se utiliza essas props como valores do estado, mesmo com o lazy initializer o estado do componente filho não é atualizado junto do estado do componente pai, não sei se estou fazendo algo errado e por isso não atualizou, tentei enviar o código mas os comentários não estão aparecendo

@IgorAlves15 16 күн бұрын

Eu não entendi o pq de passar uma função para o useState sendo que useState({name, username}) também funciona.

@versaleyoutubevanced8647 15 күн бұрын

porque ele aprendeu isso recentemente e quer usar em tudo, é normal todo mundo tem essa fase

@devjunioralves 14 күн бұрын

Sim Igor, é só uma opção a mais, eu acho legal mostrar formas diferentes, mas não significa que deva sempre usar. @versaleyoutubevanced8647 Sim claro, tem vídeo de 2 anos atrás aqui no canal falando disso 👍

@IgorAlves15 11 күн бұрын

@@devjunioralves entendi, valeu pelo retorno.