Updating state on Next.js router query change causes infinite loop

It looks like you are trying to update the state of your Next.js app when the router query changes, but this is causing an infinite loop. Here are a few things you can try to fix this issue:

1. Make sure that you are not accidentally causing the query to change in your state update function. This can happen if you are using the router’s push or replace methods to update the query within the state update function.
2. Use the useEffect hook with the router.query dependency to update the state only when the query changes. This will ensure that the state update function is not called unnecessarily.
3. If you need to update the state based on the initial query when the component mounts, you can use the getInitialProps method to do this.
4. If the issue persists, you can try using the useRouter hook to access the router object and its query directly in your component, rather than using the router object passed as a prop.

I hope these suggestions help! Let me know if you have any other questions or if there’s anything else I can do to assist.