Explorando useState no React (conceito e importância)
Neste vídeo, você irá explorar o conceito fundamental de estados no React, um dos pilares essenciais para o desenvolvimento de aplicações dinâmicas e interativas. Aprenderá como os estados no React funcionam, sendo variáveis observadas que, ao serem modificadas, desencadeiam a renderização dos componentes. Além disso, será guiado na manipulação eficiente dos estados utilizando a função `useState`, essencial para acompanhar e controlar as alterações de variáveis em tempo real em seus componentes React. Este tutorial abrange desde a importância dos estados até a necessidade de seguir a estrutura de array retornada por `useState`, permitindo uma compreensão aprofundada e prática sobre como utilizar efetivamente os estados no desenvolvimento de aplicações React dinâmicas e responsivas.
- [00:00]( • Explorando useState no... ) 🔄 Conceito de Estados no React
- Estados no React são variáveis observadas que, ao serem alteradas, fazem o componente renderizar novamente.
- [01:09]( • Explorando useState no... ) 🔄 Manipulação de Estados no React
- No React, ao utilizar `useState`, é necessário chamar a função retornada para alterar o valor do estado.
- É possível monitorar e visualizar em tempo real a mudança de valores dos estados em um componente.
- [03:15]( • Explorando useState no... ) 🔄 Uso de Estado no React
- Estados no React permitem observar e acompanhar alterações de variáveis em tempo real.
- Ao utilizar estados, é essencial seguir a estrutura de um array retornado por `useState`.
-----
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
Пікірлер: 26
Essa explicação é sensacional Diego, muita gente fica engessado com setAlgumaCoisa() e nunca entende o que realmente é, Tenho certeza que mudou o pensamento de muita gente. Parabéns, você sempre surpreende.👏👏👏🚀🚀🚀
Uma das melhores explicações que já vi, tua didática é boa dms.
@GabrielSilva-mv4fm
Ай бұрын
boa mesmo mesmo sabendo foi legal de assistir, de quebra deu uma pontuada no typescript que demorei mt quando fiquei travado nesse erro kkk
😄 Direto as assunto. Top.
Esperando o vídeo sobre useReducer
Excelente 🤩
Parabéns Diego pela explicação muito top...
Didática perfeita!! Diego brabo d+
Didática de milhõessss
voltando aqui nesse canal depois de 4 anos trabalhando na área e tendo usado a rocket pra começar... nostálgico
Muito top..
faz isso com os outros hooks importantes
Muito bom! Uma duvida no minuto 1:55 quando cria tipagem da função onSearchInputChanged, ao passar o mouse sobre o onChange é informada a tipagem do onChange ChangeEventHandler, se usasse esta tipagem na função onSearchInputChanged em vez de ChangeEvent qual seria o problema ?
Faz do useCallback e do useMemo também.
Diegooooo, Eu estou desenvolvendo uma plataforma para escolas, com o objetivo de permitir que cada instituição possa gerenciar seus próprios dados. Esta plataforma será simples em termos de funcionalidades, sendo destinada exclusivamente para que as escolas possam adicionar as porcentagens de desempenho das turmas e, consequentemente, gerar gráficos de barras que comparem essas turmas. Minha dúvida reside no fato de que, por nunca ter trabalhado com algo tão genérico e envolvendo apenas um banco de dados para a aplicação, não sei qual seria o melhor método a ser adotado. Devo criar um único banco de dados e gerenciar tudo a partir dele (o que pode resultar em custos elevados, dependendo da utilização) ou considerar outras alternativas? Por Favor, me salva 🙂
Fala Diegao, como voce centraliza a tela no macos com atalhos???
😀
AGR só falta o useState e useReducer
Alguem sabe o nome da extensão que mostra o resultado do console ao lado, igual o que ele ta usando?
@daaviib
Ай бұрын
console ninja
alguem sabe o tema de cores que ele está usando?
@alvarod.1105
Ай бұрын
vasper++
Quais os casos de uso para o useState em uma aplicação real?
@MultiBoblight
Ай бұрын
O useState é q hook mais usada do react justamente para os casos de fazer a renderização do componente novamente, geralmente ela esta associada com alguma ação do usuario, por exemplo, abrir um menu teria um estado que verifica se o menu esta aberto ou nao inicializado com const [open, setOpen] = useState(false) inicializando como falso para o menu estar fechado, ao clicar no botao para abrir o menu ele alteraria o estado de open para true com a setOpen(true) permitindo assim ter o controle do menu Outra forma que é usado é com os inputs como ele apresenta no video, ou seja, sempre que vc quiser ter algo que ao mudar muda o funcionamento do componente vc ira utilizar o useState
@uiliaalvares
Ай бұрын
@@MultiBoblight ahhh.... entendi, obrigado
Cara ...tive que assistir umas 5 vezes para entender...obs: sou iniciante rsrs...mas no curso não explica no detalhe isso