O conceito de guardar o estado do usuário na URL é interessante, especialmente para situações onde o estado precisa ser compartilhado ou persistido entre sessões. O código apresentado é uma abordagem simples e direta para alcançar esse objetivo no contexto do Next.js. No entanto, há algumas considerações e melhorias que podem ser feitas:
-
Generalização do Hook: O hook
useQueryState
está hardcoded para a rota/blog
. Seria mais útil se ele pudesse ser usado em qualquer rota. Para isso, você pode usarrouter.pathname
em vez de/blog
.router.push(`${router.pathname}?${newParams.toString()}`);
-
Evitar Renderizações Desnecessárias: Cada vez que você chama
router.push()
, você está causando uma nova renderização da página. Se você estiver atualizando vários estados de URL ao mesmo tempo, isso pode levar a várias renderizações. Uma solução seria usar uma função debounce ou um callback para agrupar várias atualizações. -
Tratamento de Valores Complexos: O hook atual lida apenas com strings. Se você quiser armazenar valores mais complexos (como objetos ou arrays) na URL, precisará serializá-los e desserializá-los. Por exemplo, usando
JSON.stringify()
eJSON.parse()
. -
Integração com
useState
: Para tornar o hook mais familiar para os desenvolvedores React, você pode integrar a lógica douseState
:const [internalValue, setInternalValue] = useState(value);
E então sincronizar
internalValue
com a URL. Isso permite que você use o hook exatamente como usaria ouseState
, mas com a persistência na URL. -
Segurança: Tenha cuidado ao ler valores da URL e usá-los diretamente em seu aplicativo. Valores maliciosos podem ser inseridos na URL. Sempre valide e/ou sanitize os valores antes de usá-los.
-
Histórico de Navegação: Cada vez que você atualiza a URL, uma nova entrada é adicionada ao histórico de navegação do navegador. Isso pode não ser o comportamento desejado, especialmente se o usuário estiver apenas ajustando um filtro. Você pode considerar usar
router.replace()
em vez derouter.push()
para evitar isso. -
Fallback para Navegadores sem suporte: Embora a maioria dos navegadores modernos suporte a API
URLSearchParams
, pode ser uma boa ideia incluir um polyfill ou verificar a disponibilidade antes de usar.
Em resumo, o conceito de armazenar o estado na URL é poderoso, mas é importante considerar as implicações e nuances de sua implementação. A abordagem apresentada é um bom ponto de partida, mas pode ser aprimorada e adaptada de acordo com as necessidades específicas do projeto.
Ótimos pontos! Criei esse código pensando no meu caso de uso e acabei esquecendo de generalizar ele. Vou atualizar o código com suas dicas!