How to manage the state in Remix?

Question

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.

Thereat

Answer 1

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.

Poetaster

How would you set a global state across all routes, eg.: dark_mode? – Vaccination

Store it in a cookie or session, then return it from your loader for use in components. remix.run/docs/en/main/utils/sessions – Poetaster

I see thanks for the clarification. So there is no global state like in redux -- It's either data coming from an api, a url param, a search param or a cookie? How would a remix app that has many user interactions, eg. a spreadsheet webapp handle the state? or is remix not suited for that usecase? – Vaccination

As I said before, Remix is still React, so you can still use existing state management libraries. – Poetaster