javascript - Contextual routing causes components to refresh in NextJS

Question

I have a very simple app that has three buttons. When you click on the button a modal pops up. I'm using NextJS routing for modal routes.

When the modal opens, the button components are re-rendered. For me this seems like an overkill, all components in the main screen (the screen with the button that causes the modal to appear) are re-rendered.

Is there a way to stop this re-rendering when the modal opens?

Ive also noticed the same happens when the modal closes.

Here is a link to codesandbox to replicate this behaviour: https://codesandbox.io/s/misty-shadow-sgf68?file=/pages/index.js:235-343

Here is a code example to replicate this behaviour.

// pages/index.js
import Modal from "react-modal";
import { useRouter } from "next/router";
import Hello from "../components/Hello";

export default function IndexPage() {
  const router = useRouter();
  // console.log(router.path);
  return (
    <div>
      <Hello someText="This is what" />
      <Hello someText="Meeeee" />

      <Modal
        isOpen={!!router.query.country}
        onRequestClose={() => router.push(`/`)}
      >
        <p>Hello World</p>
      </Modal>
    </div>
  );
}

// components/Hello.js
import Link from "next/link";

const Hello = ({ someText }) => {
  console.log(someText);
  return (
    <Link href={`?country=lol`} as={`/?country=lol`}>
      <a>To Country</a>
    </Link>
  );
};

question from:https://stackoverflow.com/questions/65545596/contextual-routing-causes-components-to-refresh-in-nextjs

Answer 1

Waitting for answers