useFirebaseUser state

[Twister42]

Hello I'm trying to add some features in your great lib and I struggle a bit because I'm new to react and quite new to modern JS ;-), so bear with my stupid questions.

I have a question about useFirebaseUser state.

At the moment it's define like that :

  const [user, setUser] = useState()
  const [customClaims, setCustomClaims] = useState({})
  const [initialized, setInitialized] = useState(false)

Each state-object update trigger a re-rendering of the React components using whenAuthUser*.
So my naïve question is : wouldn't it be better to use a single object to hold the state ?
Like :

  const [{ user, customClaims, initialized }, setStateData] = useState({
    user: undefined,
    customClaims: undefined,
    initialized: false,
  })

Regards

[kmjennison]

Good question! Here's what React says about breaking state up versus keeping it together:

we recommend to split state into multiple state variables based on which values tend to change together.

so it seems reasonable to consolidate the state like you suggest.

I assumed the state change would batch-update before rerendering, but React currently only batch-updates inside React event handlers (more info in this post), and our updates are happening inside a Firebase callback.

[kmjennison]

Feel free to open an issue and PR on this!

[Twister42]

I'll try to do that quickly ;-)
I'm trying to add anonymous login functionality to your lib but the multiple refresh is making my new hoc creating multiple anonymous accounts.
You can have a look here if you want : https://github.com/Twister42/next-firebase-auth/tree/anon (withAnonUser.js)
I'll try to clean all this and propose several PR when I'm ready (as well as finishing the PR on multi-tenancy).

[kmjennison]

We've made this change in v0.13.3-alpha.0.