[React.js] Como "reiniciar" uma página com "useNavigate"?

Como "reiniciar" o useEffect de uma página como se estivessemos recarregando a mesma?

Talvez você já se deparou querendo disparar uma função novamente, refazer algum Fetch de dados e entre outros, e chegou a pensar que precisava "atualizar" a página, o que seria um refresh/reload - famoso F5.

Porém, nos métodos tradicionais como window.location.reload() isso causaria o recarregamento completo da página, fazendo com que o navegador carregue do zero varios arquivos ao invés de só atualizar o necessário, além de perder os dados de contextos e estados, ou seja, perderia o princípio do SPA.

Mas podemos realizar um refresh silencioso (silent refresh) aproveitando as funcionalidades do React.js. Para isso você precisará de dois Hooks do Router DOM.

• useLocation: Ele retornará em uma variavel informações da rota atual, como pathname, query param e outros.
• useNavigate: Para fazer a "mudança" de rota.

Com o useLocation() teremos acesso a chave da rota atual, pois toda rota possui uma key que muda conforme elas se alteram mesmo que mudemos para uma rota de mesmo nome. Pegou a ideia?

Sendo assim, podemos criar um useEffect, por exemplo, que em seu array de dependências possua o key da rota, como location.key.

Dessa maneira, o conteudo do useEffect irá disparar toda vez que essa variavel mudar, e como o key sempre muda mesmo que mudemos para uma rota de mesmo nome, basta no momento que quisermos dar o refresh enviar o usuário para a mesma rota através do useNavigate().

Sendo similar a quando usamos window.location.reload(), porém, sem a necessidade de recarregar diversos arquivos do zero ou de perder o contexto da aplicação.

Ex.:

    const location = useLocation();
    const navigate = useNavigate();
    
    useEffect(() => {
        // SUAS AÇÕES APÓS O "SILENT REFRESH"
    }, [location.key])
    
    const someFunction = () => {
        navigate(location.pathname);
    }

Por via de curiosidade, isso também poderia ser obtido com algum estado (state) auxiliar para forçar o disparo do useEffect com sua mudança de valor.

Fim
Obrigado pela leitura 😉.
Espero que tenha gostado do pequeno artigo e que seja útil de alguma forma. Até o próximo! ✌️