How to update url query param on state change without breaking rules of hooks

[sterile loom]

Hello, I am trying to update url query param on my currentPage state.

Including router in the dependency array results in a infinite render loop and excluding it breaks the react-hooks/exhaustive-deps rule. Any ideas on this?

const [currentPage, setCurrentPage] = useState(1);

useEffect(() => {
  router.push({
    query: { page: currentPage },
  });
}, [currentPage, router]);

[craggy flax]

You can try using the shallow option to avoid the page refresh.

The best way though overall imo would be to update your query in an event handler rather than a useEffect. Whichever event handler sets the current page