Fix: with-firebase-authentication maximum update depth exceeded errors

[francisrod01]

Reference to PR #15628

I think your refactor looks great, but we have some different issues now.
After login with email/password, I try to access the protected page.

• I have a sidebar component that uses the useUser() for consume the user properties.
• The protected page also has a fetch for the getFood api page.

For the sidebar I face this error:

Unhandled Runtime Error
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Source
src/lib-utilities/auth/useUser.js (53:4) @ eval

  51 |       return;
  52 |     }
> 53 |     setUser(userFromCookie);
     |    ^
  54 |     // eslint-disable-next-line react-hooks/exhaustive-deps
  55 | 
  56 |     return () => {

For the fetch data I see this one:

fetcher.js?c2e4:2 GET http://localhost:3000/api/getFood 401 (Unauthorized)
fetcher @ fetcher.js?c2e4:2
eval @ use-swr.js?2685:333
step @ use-swr.js?2685:32
eval @ use-swr.js?2685:13
eval @ use-swr.js?2685:7
__awaiter @ use-swr.js?2685:3
eval @ use-swr.js?2685:295
softRevalidate @ use-swr.js?2685:452
eval @ use-swr.js?2685:462
commitHookEffectListMount @ react-dom.development.js?61bb:19731
commitLifeCycles @ react-dom.development.js?61bb:19787
commitLayoutEffects @ react-dom.development.js?61bb:22803
callCallback @ react-dom.development.js?61bb:188
invokeGuardedCallbackDev @ react-dom.development.js?61bb:237
invokeGuardedCallback @ react-dom.development.js?61bb:292
commitRootImpl @ react-dom.development.js?61bb:22541
unstable_runWithPriority @ scheduler.development.js?3069:653
runWithPriority$1 @ react-dom.development.js?61bb:11039
commitRoot @ react-dom.development.js?61bb:22381
finishSyncRender @ react-dom.development.js?61bb:21807
performSyncWorkOnRoot @ react-dom.development.js?61bb:21793
eval @ react-dom.development.js?61bb:11089
unstable_runWithPriority @ scheduler.development.js?3069:653
runWithPriority$1 @ react-dom.development.js?61bb:11039
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:11084
flushSyncCallbackQueue @ react-dom.development.js?61bb:11072
scheduleUpdateOnFiber @ react-dom.development.js?61bb:21199
enqueueSetState @ react-dom.development.js?61bb:12639
Component.setState @ react.development.js?72d0:471
eval @ react.js?28cc:61
dispatch @ redux.js?00d8:222
rehydrate @ persistStore.js?2a8a:79
_rehydrate @ persistReducer.js?6faf:61
eval @ persistReducer.js?6faf:90
Promise.then (async)
eval @ persistReducer.js?6faf:89
Promise.then (async)
eval @ persistReducer.js?6faf:84
dispatch @ redux.js?00d8:213
eval @ index.js?b083:11
persist @ persistStore.js?2a8a:114
persistStore @ persistStore.js?2a8a:123
MyApp @ _app.jsx?434a:12
renderWithHooks @ react-dom.development.js?61bb:14803
mountIndeterminateComponent @ react-dom.development.js?61bb:17482
beginWork @ react-dom.development.js?61bb:18596
beginWork$1 @ react-dom.development.js?61bb:23179
performUnitOfWork @ react-dom.development.js?61bb:22154
workLoopSync @ react-dom.development.js?61bb:22130
performSyncWorkOnRoot @ react-dom.development.js?61bb:21756
scheduleUpdateOnFiber @ react-dom.development.js?61bb:21188
updateContainer @ react-dom.development.js?61bb:24373
eval @ react-dom.development.js?61bb:24758
unbatchedUpdates @ react-dom.development.js?61bb:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:24757
hydrate @ react-dom.development.js?61bb:24823
renderReactElement @ index.js?4a51:409
_callee3$ @ index.js?4a51:540
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?c973:3
_next @ asyncToGenerator.js?c973:25
eval @ asyncToGenerator.js?c973:32
eval @ asyncToGenerator.js?c973:21
_doRender @ index.js:690
doRender @ index.js:640
_callee2$ @ index.js?4a51:312
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?c973:3
_next @ asyncToGenerator.js?c973:25
eval @ asyncToGenerator.js?c973:32
eval @ asyncToGenerator.js?c973:21
_render @ index.js:479
render @ index.js:424
eval @ next-dev.js?53bc:44
eval @ fouc.js?937a:14
requestAnimationFrame (async)
displayContent @ fouc.js?937a:5
eval @ next-dev.js?53bc:43
Promise.then (async)
eval @ next-dev.js?53bc:30
eval @ next-dev.js?53bc:30
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1596920174993:2108
__webpack_require__ @ webpack.js?ts=1596920174993:873
checkDeferredModules @ webpack.js?ts=1596920174993:46
webpackJsonpCallback @ webpack.js?ts=1596920174993:33
(anonymous) @ webpack.js?ts=1596920174993:1015
(anonymous) @ webpack.js?ts=1596920174993:1023
Show 46 more frames
react-dom.development.js?61bb:88 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in About (at _app.jsx:16)
    in PersistGate (at _app.jsx:16)
    in Provider (at _app.jsx:15)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

[joejknowles]

Hi, yeah, I think you need to return the cancel function from Firebase as the return value for use effect there.

Where it says:

firebase.auth().onIdTokenChanged((user) => {
   //Content omitted
  })

Change that to

const cancelAuthListener = firebase.auth().onIdTokenChanged((user) => {
   //Content omitted
  })

// Rest of function omitted

return cancelAuthListener;

I'll make a PR for this tomorrow

[francisrod01]

Got it. Thanks @joejknowles for reaching out!
I took the initiative and opened a PR for it: #16057