In the minimal example for the Layout component you are creating a new random value each time the route/path/view changes and rerendered. This is an unintentional side-effect and is not an accurate method at all for determining what is being mounted/remounted or rendered/rerendered as it's not using any of the React component lifecycle.

export default function Layout({ children }) {
  const random = Math.random(); // <-- side-effect!!
  return (
    <div>
      <div style={{ backgroundColor: "red" }}>{random}</div>
      <div>
        <Link href="/about">About</Link> <Link href="/">Index</Link>
      </div>
      <main>{children}</main>
      <footer>
        Click on different page and observe that random number changs which
        means that layout component gets rerendered and reinitialized everytime.
      </footer>
    </div>
  );
}

Click on different page and observe that random number changes which means that layout component gets rerendered and reinitialized every time.

This is a very false assumption/conclusion.

If at a minimum you place the random value into a React state

const [random] = useState(Math.random());

you'll clearly see it remains constant and never changes no matter how many times you navigate between "/" and "/about" links/pages. In other words, the state persists exactly as the docs claim.

In fact, if you take it a step further and also use a mounting useEffect hook

useEffect(() => {
  console.log("Layout MOUNTED", { random });
}, []);

you'll see it only ever logs once with the random state value and never changes or logs again.

export default function Layout({ children }) {
  const [random] = useState(Math.random());

  useEffect(() => {
    console.log("Layout MOUNTED", { random });
  }, []);

  return (
    <div>
      <div style={{ backgroundColor: "red" }}>{random}</div>
      <div>
        <Link href="/about">About</Link> <Link href="/">Index</Link>
      </div>
      <main>{children}</main>
      <footer>
        Click on different page and observe that random number changs which
        means that layout component gets rerendered and reinitialized everytime.
      </footer>
    </div>
  );
}