How Redux works with Nextjs

[bhubavenski]

Hello! My question is all about “Do we actually need to keep ref of the store and create the store with makeStore()” What I mean: even if we do not use useRef and makeStore, if we load the store in the root layout, which is requested only once, during the serving of the entry point and during client navigation, this layout is not requested again, only the page is requested. This means that we stay with one layout for the entire life of the application, which means that we can create a store without a ref, because the only time we will get a new layout is when we refresh the browser, which will also reset the store , which is correct behaviour. If we create the store into the root layout then there is no reason to make track of it with useRef, because the root layout is persisted between navigation

[phryneas]

React might reexecute any of your components for any reason at any time. What you might take for granted today can change tomorrow - there is absolutely no official guarantee that your RootLayout only executes once.

[bhubavenski]

And in the NextJs docs it says that "On navigation, layouts preserve state, remain interactive, and do not re-render.". So its not gonna execute more than once and its only served once when we request the website for the first time, because its root layout

[phryneas]

Next.js can say all it wants, it's out of their scope. Rerendering is decided by React.

React has no official guarantees when it rerenders. They could introduce a thousand rerenders in the next patch release of React, and it would be perfectly fine with SemVer. How often any of your components rerenders is an implementation detail of React. If you write stateful code without using one of React's mechanisms to do so (useRef and useState), you break the core rules of React and write buggy code.

[bhubavenski]

But React also can decide to change how useRef works. I don’t think this is a valid argument. React components rerenders in two cases - render triggered by its parent or render triggerd by the component itself

[phryneas]

No, useRef is documented. It cannot be changed in a patch release, that would require a major.

Really, you want to YOLO things based on an undocumented assumption here, and we're not gonna endorse that in any way.

[phryneas]

But just as an example on what could easily go wrong even today: What if you also call another library hook in your root layout, and unbeknownst to you (because of a bug, an undocumented edge case or as a result of a library update), that hook causes a rerender?