Meaning of the hydrating flag in the new version

[Aleksa Kojadinovic]

Hi,

I've recently switched to 9.0.0-rc.2 and I'm a bit confused about how the hydrating flag returned from useHydration hook works.

If I understood correctly, and from glancing at the source code, the hydration (synchronous action dispatching) is invoked in a layout effect so that the data will be there for the first render (which is the entire point). However, the hydrating flag appears to be stuck in true. This causes navigation issues since I have no way of checking whether the data was hydrated. I have modified my selectors already but that's not the point - in some pages I want to completely prevent rendering in case the hydration is not done. So my first instinct was to do:

//...
const { hydrating } = wrapper.useHydration(props);
if (hydrating) {
    return null;
}
return (...);

But this causes the page to never be rendered since the flag gets struck in true.

I've also tried running the examples in demo and logging the flag and it seems to get stuck in true in some navigation examples there as well.

So did I misunderstand something about how this is supposed to work or is it perhaps an issue? Thanks in advance :)

[Jia Liang]

As someone migrating from 8 to 9, I encountered the same problem as you but just got it to work.

There were a few of gotchas in the readme that I miss due to not being observant:

In your makeStore (the first argument you pass into createWrapper), you now need to expect an object containing the property reduxWrapperMiddleware. e.g. const makeStore = ({ reduxWrapperMiddleware }) => {}.

Plug this into the end of your middleware list.

For redux, it's

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware, reduxWrapperMiddleware));

For redux-toolkit, it's

const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(sagaMiddleware, reduxWrapperMiddleware)
  });

For the props object you pass into useHydration, make sure it has one of these properties: reduxWrapperActionsGSSP, reduxWrapperActionsGSP, reduxWrapperActionsGIAP or reduxWrapperActionsGIPP, depending on what lifecycle method you use (e.g. GSSP = getServerSideProps).

If they're missing, then likely your component is not receiving the correct props. Your component should receive props.pageProps from your _app.js.

Those properties should also not be an empty array, they should contain a list of actions to dispatch to hydrate your store.

[Aleksa Kojadinovic]

Hi, thanks for the reply and sorry for getting back to you so late.

I have indeed implemented all of this exactly the way you described and the problem still persists. However I've encountered a different problem which may be the underlying cause of this one, but since it causes other problems as well I think it merits another issue, I'll link it here when I post it :).

[Aleksa Kojadinovic]

The issue was me calling useHydration multiple times, since I have custom _app it is actually enough to just call it there :)