How to identify when the next.js hydration finishes hydration on client side?

[bhavin7181]

We need to change DOM content on certain html elements when the next.js finishes hydration of the page. Is there an event which we can listen to make this change post-hydration?
Thank you in advance.

[jamesmosier]

You should be able to use useEffect for this! useEffect does not run on the server, so that would be a good choice to run some code after the client loads.

[danielGz]

useEffect does run before hydration finishes though, there are cases in which you need to check for additional stuff within useEffect, such is the case of router.query. The docs mention this: "The query string parsed to an object. It will be an empty object during prerendering if the page doesn't have data fetching requirements."

And I ran into the case of having an empty dependencies array and trying to do something with router.query but It'd never execute again by the time query was populated.

[IzaacBarratt]

Also have this exact problem with query parameters. Any suggestions?

[mdupree]

why not use router.isReady

[alexeysarakuz]

you saved my day @mdupree! Thanks!

[atellmer]

useEffect runs even when hydration is not yet complete. At least in next.js 14 and react 18.

I don't know who came up with this brilliant (not) idea.