предотвратить rerender и unmount
- next: 14.1.3
- папка 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";