How does FireCMS handle state?

[kongweiying2]

Does this repo use a state management library like Redux, MobX or useSWR? Looking at the repo it doesn't look like it - just vanilla Firebase. Was curious as to how the library manages real-time updates.

[fgatti675]

Hi @TheAussieStew :)

We don't use any additional library for state management like the ones you mention.
I have used Redux before and I am not a huge fan. There is nothing wrong with it, but I have seen it misused too often. The most common mistake is mistake local state for global state. For example, having the content of a collection as global state, when it is local state to a table component only.

State should be held in the smallest scope possible, and that is how we mostly handle it in FireCMS.
In any case, we do have global state related to different parts of the app, such as the authentication state, or the order of the side panels, the snackbar controller... We implement those by holding the state in React Contexts, and accesing them thorugh React Hooks (which we also expose for the end user to benefit from)
You can find the related code in those packages:
https://github.com/Camberi/firecms/tree/master/src/core/contexts
https://github.com/Camberi/firecms/tree/master/src/hooks

Regarding real time updates, we have created one interface called Datasource, that includes methods like listenCollection or listenEntity that include callbacks that should be fired when the data changes. We plug those to Firestore, which has great real time support and then we call them from the respective components, like collection data tables.
This is the hook used for keeping the data updated: https://github.com/Camberi/firecms/blob/master/src/hooks/data/useCollectionFetch.tsx

Let me know if you have further questions!

[kongweiying2]

Thanks for the detailed response, currently looking through different ways of managing state that mesh well with the way Firestore handles snapshot subscriptions, so interesting to see the usage of custom hooks for this purpose!