Título: Utilizando Context API e UseMatches para gerenciar dados em aplicações Remix.run

Ao desenvolver uma aplicação com Remix.run, é comum que precisemos acessar dados em pontos específicos da aplicação, independente da hierarquia de componentes. Neste artigo, abordaremos três maneiras de fazer isso: utilizando a Context API do React e duas das formas nativas do Remix, useMatches e useRouteData.

Context API do React

Para exemplificar a utilização da Context API, vamos supor que temos um usuário logado e queremos inserir informações desse usuário dentro de um formulário. O primeiro passo é analisar a hierarquia de rotas do Remix, usando o comando npx remix routes. Em nosso exemplo, a hierarquia de rotas vai da rota root até a rota /users/form, que retorna o componente UserForm.

<Routes>
  <Route file="root.tsx"> <<< PRIMEIRO NÍVEL
    <Route path="products/clear-cart" file="routes/products.clear-cart.tsx" />
    <Route path="checkout" file="routes/checkout.tsx" />
    <Route path="products" file="routes/products.tsx" />
    <Route path="payment" file="routes/payment.tsx">
      <Route path="success" file="routes/payment/success.tsx" />
      <Route index file="routes/payment/index.tsx" />
    </Route>
    <Route path="logout" file="routes/logout.tsx" />
    <Route index file="routes/index.tsx" />
    <Route path="login" file="routes/login.tsx" />
    <Route path="users" file="routes/users.tsx"> <<< SEGUNDO NÍVEL
      <Route path="form" file="routes/users/form.tsx" /> <<< TERCEIRO NÍVEL
    </Route>
  </Route>
</Routes>

Após criar um arquivo chamado /app/features/Users/context.ts, podemos definir a interface para o UserContext e criar o contexto utilizando createContext do React. Em seguida, no componente root, vamos buscar o usuário logado através do loader e passar essa informação para o UserContext.Provider.

Com o contexto pronto, podemos acessar o usuário logado em qualquer componente, como o UserForm, utilizando o hook useContext do React. Para evitar repetições e simplificar o acesso ao usuário logado, podemos criar um hook personalizado chamado useLoggedUser dentro do arquivo context.ts. Dessa forma, basta importar e utilizar o hook useLoggedUser nos componentes necessários.

UseMatches do Remix:

Agora vamos explorar a forma nativa do Remix para gerenciar dados, utilizando o hook UseMatches. Esse hook nos permite acessar os dados retornados pelos loaders de todas as rotas da hierarquia até o ponto de execução da aplicação.

Para utilizá-lo, primeiro importe useMatches do remix run react. No exemplo, podemos acessar o usuário logado e a lista de usuários da seguinte forma:

const [root, users] = useMatches();
const loggedUser = root.data.loggedUser;
const usersList = users.data.users;

Da mesma forma que fizemos com o contexto, podemos criar hooks personalizados para simplificar o acesso aos dados. Por exemplo, podemos criar os hooks useLoggedUser e useUsersList no arquivo hooks.tsx, que utilizam useMatches internamente.

Conclusão

Tanto a Context API do React quanto o UseMatches do Remix são maneiras eficientes de gerenciar dados em aplicações Remix.run. A escolha entre as duas dependerá de suas preferências e experiências anteriores. A Context API pode ser mais familiar e fácil de reutilizar em diferentes projetos, enquanto o UseMatches é uma solução nativa do Remix que pode facilitar o acesso aos dados das rotas.