Firestore hooks - run function on data update

[benjamin-sommer]

Is there a simple way to run a function every time a new snapshot is loaded by the client? I need to run a simple function that makes some changes to the data gotten from firestore, and then sets a useState value. Currently, you can only use the variable provided when you initialise a useCollection hook, meaning it is hard to format the data first before using the variable in JSX.

[Rob5Underscores]

You may want to consider moving the firestore hook into its own component and using React's hooks (useEffect/useCallback) to achieve this - https://reactjs.org/docs/hooks-reference.html

You could then create your own hook extending the firebase hook that runs your desired function if you wish to have this repeated throughout your application (https://reactjs.org/docs/hooks-custom.html).

Hope these suggestions are useful!

[benjamin-sommer]

Thanks! I will take a look at this.

[benjamin-sommer]

I really needed to run the function to update the temporary state while it is being written to firestore. Can you check out my SO post? Thanks

[Rob5Underscores]

The answer given already seems correct to me.

You need to use state to keep the 'local' changes as they are being updated to firestore. The hook will update and your component will re-render with the new data which will be up to date with any changes other users have also made to the database.

[benjamin-sommer]

But how do I store the temporary data? I cannot edit the projects variable directly, can I?

[benjamin-sommer]

I would have to keep the temporary data in a separate variable, but I need to update that once the real data comes back, that's what I can't figure out how to do.

[Rob5Underscores]

I assume projects is your retrieved firestore value?

As outlined in the SO answer, the useEffect callback can be used to set the component's state to the data retrieved from Firestore. So your projects data is stored in the state and you can mutate it as desired. When the hook updates with new data, useEffect will update the state again.

[benjamin-sommer]

Yes, projects is my retrieved firestore value.

Am I right in saying that, using the solution in the SO answer, if the database is updated by another user, the calendar would show outdated data?

This is important because multiple users will be adjusting the calendar simultaneously.

[Rob5Underscores]

No, useEffect is called to process all 'side-effects'.

If the hook value updates, useEffect will keep the state up to date

[benjamin-sommer]

In the SO answer, when he says

That is, after the first rendering, the state is separated from firestore.

I presumed that meant only the writes were sent, not that the reads came back.

[Rob5Underscores]

Yeah the state will be separated so you may mutate it as needed while your data is being updated to firestore but useEffect will keep it up to date if firestore changes.

[benjamin-sommer]

Ok, thanks. I will try and implement this.

[iamswain25]

how would you use transform functions to re-run the function? @chrisbianca