Methods of router will be updated after each top to down rerendering

[yangmingshan]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

16.6.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Nginx

Describe the Bug

The problem

Let's say I have an order list page, it accept a optional parameter page. I want fetch the list in the useEffect, and jump to the error page if the request fails. The codes should be like this:

// pages/orders.js
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import { getOrderList } from "../api";

export default function Orders() {
  const { push } = useRouter();
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const page = new URLSearchParams(location.search).get("page") || "1";
    getOrderList(page).then(
      (response) => {
        setOrders(response);
      },
      () => {
        push("/error");
      }
    );
  }, [push]);

  // ...
}

The problem is when I visit /orders?page=2, the order list api will be requested twice, if the request did not fail.

How this happened

The effect will run after the first rendering, and cause the first request, not surprising. But next.js will call router.replace() after the first rendering, it will cause a top to down rerendering. The router will be updated after each AppContainer rerendering, so are it's properties and methods. So push is a new function in the second rendering, and the effect will run again. This is how the second request happened.

Expected Behavior

Methods of router should be stable between rerendering. Or even router itself should be a stable and mutable object, only it's properties should be immutable, like react-router.

To Reproduce

See Describe the Bug.

Another request, could we publish unminified codes to npm? Debug next.js is a disaster even with sourcemap 😞.

[yangmingshan]

Related issue: #27691.

[ijjk]

Closing as a duplicate of #18127

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.