предотвратить rerender и unmount

  1. next: 14.1.3
  2. папка app

страница:

после каждого нажатия на кнопку идет полная перересовка а C unmount-итца

import { A, B, C } from "@/components/some";
import { FC } from "react";

const Page: FC = () => {
  return (
    <div>
      <h2>page</h2>
      <A />
      <B />
      <C />
    </div>
  );
};

export default Page;

компонент A:

"use client";
import { usePathname, useRouter } from "next/navigation";

export const A = () => {
  console.log(`A`);
  const pathname = usePathname();
  const path = pathname + "?" + `some=${Math.random()}`;
  const router = useRouter();

  return (
    <div>
      <h1>A</h1>
      <button
        onClick={() => {
          router.push(path);
        }}
      >
        change query
      </button>
    </div>
  );
};

компонент B: как избежать rerender-а?

"use client";
export const B = () => {
  console.log(`B`);

  return <div>123</div>;
};

компонент C: почему тут происходит mount/unmount

"use client";
import { memo, useEffect } from "react";
export const C = memo(() => {
  console.log(`C`);

  useEffect(() => {
    console.log(`mount C`);
    return () => {
      console.log(`unmount C`);
    };
  }, []);

  return <div>123</div>;
});

C.displayName = "C";

Ответы (0 шт):