Isso é muito útil, principalmente para manter a persistência dos filtros entre o histórico de navegação, mas não é bala de prata, sempre que se alterar a url dessa forma, toda cadeia de componentes é chamada novamente.
Sensacional esse conteúdo, além dos benefícios citados, uma vantagem é no compartilhamento, fica mais fácil enviar uma tela com filtros para outras pessoas... Irado o conteúdo
Bom demaise, super vale a pena isto daí porque muitas dessas tabelas você pode acabar compartilhando o link para mostrar determinada informação, você não vai ficar falando os filtros que o cara tem que colocar para ver o que você está vendo. 👍
o useSearchParams não usa use state lá dentro ? se sim, qual a diferença em usar o useState direto ou um hook que usa useState ? sem contar que jogar dados na url torna ela muito grande e mais trabalho pra pegar esses dados, não ?
É como ele disse, essa solução é para casos triviais, por exemplo uma busca, um filtro, uma paginação... Não para estados complexos ou estados muito grandes. Sem contar que usando o useState se vc copiar a URL e colar em outra janela de navegador, vc perde o estado, já com useSearchParams o estado é mantido pois o estado está salvo na URL. É muito útil sim. Mas claro não é para tudo.
Percebi que quando limpo o filtro ele não atualiza a url, continuando com o filtro aplicado mesmo após removê-los. Precisa configurar o comportamento ou isso não deveria acontecer?
Tenho acompanhado esses videos, então basicamente todo esse esquema aí é pra quando você não tem backend né? Pq basicamente o backend que é responsável por tudo isso aí que você fez sobre filtragem e tudo mais, e ele normalmente entrega paginado, o que faz não necessitar de cache já que a informação é buscada aos poucos dentro de determinados parametros. Ou estou enganado?
E com backend tbm, oque ele ta fazendo e so criar uma variavel global no front antes de fazer o get para o backend, nesse get a gente coloca o valor da variavel para fazer a pesquisa
Foda. Diego, você sabe se dá pra fazer algo assim sem o react query? Usando um Server Action por exemplo no Next 14? Porque pelo que entendi, o React Query nota que houve uma mudança naquela queryKey (a adição dos filtros) e automaticamente inválida a query atual fazendo recarregar os dados. É possível algo parecido com o "fetch" simples consumindo uma api numa server action por exemplo? Ou seria mto trampo? 🤔 Digo isso porque o React Query com SSR não está exatamente como eu gostaria (ainda), obrigando fazer uns prefeths, hidratações, etc, mas ainda sim é forma mais simples que encontrei até agora.
Fala Allyson, com Server Components na verdade é ainda mais fácil. Você simplesmente tem que acessar as searchParams através da propriedade do componente (nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional) e usar isso na sua chamada fetch.
Isso é muito útil, principalmente para manter a persistência dos filtros entre o histórico de navegação, mas não é bala de prata, sempre que se alterar a url dessa forma, toda cadeia de componentes é chamada novamente.
por isso eu uso redux!!!!! :D ele controla tudo pra mim e eu posso fcar em entregar as tasks mais rapido
Esses cortes das lives na Twitch estão maravilhosos. Dá pra aprender muita coisa em poucos minutos. Continuem!!
Sensacional esse conteúdo, além dos benefícios citados, uma vantagem é no compartilhamento, fica mais fácil enviar uma tela com filtros para outras pessoas... Irado o conteúdo
Diego é uma inspiração. O cara é foda! ❤
Bom demaise, super vale a pena isto daí porque muitas dessas tabelas você pode acabar compartilhando o link para mostrar determinada informação, você não vai ficar falando os filtros que o cara tem que colocar para ver o que você está vendo. 👍
Massa. Estou utilizando essa abordagem em uma aplicação de estudo que estou desenvolvendo
mais por conteudos assim, eu estava a usar o useState mas agora vejo que devo usar o searchParams e o video me deixou confortavel
que foda, já vou aplicar numa situação muito parecida que eu tava fazendo
o useSearchParams não usa use state lá dentro ? se sim, qual a diferença em usar o useState direto ou um hook que usa useState ?
sem contar que jogar dados na url torna ela muito grande e mais trabalho pra pegar esses dados, não ?
É como ele disse, essa solução é para casos triviais, por exemplo uma busca, um filtro, uma paginação... Não para estados complexos ou estados muito grandes. Sem contar que usando o useState se vc copiar a URL e colar em outra janela de navegador, vc perde o estado, já com useSearchParams o estado é mantido pois o estado está salvo na URL. É muito útil sim. Mas claro não é para tudo.
Percebi que quando limpo o filtro ele não atualiza a url, continuando com o filtro aplicado mesmo após removê-los. Precisa configurar o comportamento ou isso não deveria acontecer?
Qual extensão que já exibe o console.log no vscode? muito top
se chama ninja console.log
Muito bom!!!!
Qual extensão que ele usa no 4:53 que ja informa o retorno da variavel
Console ninja?
Esses vídeos são tirados de alguma live?
po, tbm queria saber, o conteúdo ta mto bom até mesmo só os cortes aqui no YT
Simmm, ocorrem lá na Twitch (usuário dieegosf)
sim @teshikaru7278, com alguma frequência ele tá fazendo live na Twitch, e tão pegando alguns cortes de lá.
@@dieegosf seguindo desde já, valeu demais!!!
Tenho acompanhado esses videos, então basicamente todo esse esquema aí é pra quando você não tem backend né? Pq basicamente o backend que é responsável por tudo isso aí que você fez sobre filtragem e tudo mais, e ele normalmente entrega paginado, o que faz não necessitar de cache já que a informação é buscada aos poucos dentro de determinados parametros. Ou estou enganado?
E com backend tbm, oque ele ta fazendo e so criar uma variavel global no front antes de fazer o get para o backend, nesse get a gente coloca o valor da variavel para fazer a pesquisa
Como voce faz pro console.log aparecer no vscode?
Onde ele faz essas lives? Há divulgação?
Acontecem na Twitch com usuário dieegosf. Geralmente divulgo pelo meu Twitter.
Tem as moral de fazer um videozinho de SolidJS?
Da pra fazer isso usando Next.js, sem o react-router-dom?
import { useSearchParams } from 'next/navigation'
Foda. Diego, você sabe se dá pra fazer algo assim sem o react query? Usando um Server Action por exemplo no Next 14? Porque pelo que entendi, o React Query nota que houve uma mudança naquela queryKey (a adição dos filtros) e automaticamente inválida a query atual fazendo recarregar os dados. É possível algo parecido com o "fetch" simples consumindo uma api numa server action por exemplo? Ou seria mto trampo? 🤔 Digo isso porque o React Query com SSR não está exatamente como eu gostaria (ainda), obrigando fazer uns prefeths, hidratações, etc, mas ainda sim é forma mais simples que encontrei até agora.
Fala Allyson, com Server Components na verdade é ainda mais fácil. Você simplesmente tem que acessar as searchParams através da propriedade do componente (nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional) e usar isso na sua chamada fetch.
@@dieegosf Valeu Diego. 👊 Vou tentar replicar isso.
vlw
Como seria isso com o Nextjs?
import { useSearchParams } from 'next/navigation'
Esses conteúdos são de lives da plataforma da Rocketseat?
Não, acontecem na Twitch com usuário dieegosf
@@dieegosfObrigado, estava procurando essa informação KKKK
@@dieegosfQual a frequência de live? Está sendo todos os dias?
@@gabrielcardoso8410 não não, to fazendo quando possível, sem dia específico.
qual esse wallpaper?
Qual video fala de http state?
Ainda vai sair, mas na live de onde foi cortado esse vídeo a gente falou antes.
há meses uso o state para isso hasdfhuasfuhsa.
qual o tema?
Min Theme
@@dieegosf ELE ME RESPONDEUUUU 🤩🤩🤩🤩🤩😄😄
Muitos anos de react e a maioria das pessoas ensinando "errado"