No video

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

  • @juniormelo26
    @juniormelo26Ай бұрын

    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.👏👏👏🚀🚀🚀

  • @BarrosoPlays
    @BarrosoPlaysАй бұрын

    Uma das melhores explicações que já vi, tua didática é boa dms.

  • @GabrielSilva-mv4fm

    @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

  • @saulotarsobc
    @saulotarsobcАй бұрын

    😄 Direto as assunto. Top.

  • @murilodllx
    @murilodllxАй бұрын

    Esperando o vídeo sobre useReducer

  • @afonso_alves_1990
    @afonso_alves_1990Ай бұрын

    Excelente 🤩

  • @falacoxinha
    @falacoxinhaАй бұрын

    Parabéns Diego pela explicação muito top...

  • @murilloprado_
    @murilloprado_Ай бұрын

    Didática perfeita!! Diego brabo d+

  • @franciscocleirtonmedeirosf3047
    @franciscocleirtonmedeirosf3047Ай бұрын

    Didática de milhõessss

  • @bughunter94
    @bughunter94Ай бұрын

    voltando aqui nesse canal depois de 4 anos trabalhando na área e tendo usado a rocket pra começar... nostálgico

  • @marceloalmeida7283
    @marceloalmeida7283Ай бұрын

    Muito top..

  • @sloow2235
    @sloow2235Ай бұрын

    faz isso com os outros hooks importantes

  • @joezersmaniotto3103
    @joezersmaniotto3103Ай бұрын

    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 ?

  • @maksondouglas4020
    @maksondouglas4020Ай бұрын

    Faz do useCallback e do useMemo também.

  • @yukiritodops3
    @yukiritodops3Ай бұрын

    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 🙂

  • @teliiz
    @teliizАй бұрын

    Fala Diegao, como voce centraliza a tela no macos com atalhos???

  • @helder-rangel
    @helder-rangelАй бұрын

    😀

  • @joaovictoramorafeitosaneri5826
    @joaovictoramorafeitosaneri5826Ай бұрын

    AGR só falta o useState e useReducer

  • @awaxdem2013
    @awaxdem2013Ай бұрын

    Alguem sabe o nome da extensão que mostra o resultado do console ao lado, igual o que ele ta usando?

  • @daaviib

    @daaviib

    Ай бұрын

    console ninja

  • @logyn6590
    @logyn6590Ай бұрын

    alguem sabe o tema de cores que ele está usando?

  • @alvarod.1105

    @alvarod.1105

    Ай бұрын

    vasper++

  • @uiliaalvares
    @uiliaalvaresАй бұрын

    Quais os casos de uso para o useState em uma aplicação real?

  • @MultiBoblight

    @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

    @uiliaalvares

    Ай бұрын

    @@MultiBoblight ahhh.... entendi, obrigado

  • @gilOliveira001
    @gilOliveira001Ай бұрын

    Cara ...tive que assistir umas 5 vezes para entender...obs: sou iniciante rsrs...mas no curso não explica no detalhe isso