React Router doesnt display UI until after being updated, all help appreciated!
Hi, so when I navigate to a differentpage in my chrome extension, the page is supposed to display a colection saved in Firebase if the user is signed in. This works, except it seems that the onAuthStateChanged doesnt run until the page is updated (i write a comment or a paragraph in dev mode) and then its able to see its authenticated and then dispalys the UI, heres an image of what i mean
14 Replies
i tried global state management, and i dont htink it worked, heres my code if u want to help
maybe using react-router with some sort of useeffect that wil run the onAuthStateChanged when the page is navigated to?
I'm not sure how the onAuthStateChanged would work in the extension context, but I think you might want to use the chrome OAuth API it might be more responsive. Also, make sure to put these calls inside an useEffect or something like that
or they will be re-run everytime your component renders
great thanks! ill let u know if it works and i can send the popup tsx if needed
Gave +1 Rep to @louis
hey so i came up with kind of a hacky solutoin, not sure if itll work in production but maybe you'll know? basically i used useEffect and setTimeout to run after a second, which seems to then refresh the page so that auth state is checked
I'd put the onAuthStateChanged inside hte useEffect as well
yea unfortunately it doesnt work then
if that doesn't work, it means your state rehydration wasn't successful at first render of your app
damm, should i be worried? on the bright side it doesnt have the | Extension re-packaged in 1343ms! 🚀 thingy after the settimeout if that means naything
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
We don't support async function component atm
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@Jheovanny has reached level 2. GG!