How to manage the state in Remix?

I was going through Remix for quite a sometime but still not able to figure out state management. How to share the data between the components/routes? How to store the data which can be accessible by any component? And should be able to update the data from any child component.

Answer

First of all, remember that Remix is still React, so all the state management techniques you’re used to still work with Remix.

With that being said, Remix uses loaders to manage the server-side state. You can access this via useLoaderData from any component in the current route. You’re not limited to just the route file.

Also, via useMatches you have access to all the loader data across your nested routes from root to leaf.

Mutations should be done via actions, so instead of trying to mutate local data, POST to your action the update, and let Remix revalidate your routes to make sure your local data is in sync.

Purely client-side state, like if a dialog is visible, etc. can still be managed with useState, etc.