I'm learning Next.js. I have a page A and page B with component C in it; when I jump to the page, component C will be re-rendered. How can I avoid this?Sorry, maybe I didn't express clearly, I don't mean that useEffect will run twice, component C has already been rendered on page A, and it should not be rendered again on page B, because component C is unchanged, useEffect is just me Used to determine whether the component is rendered
page A:
import Link from "next/link";
import C from "@/components/test";
export default function A() {
return (
<div>
<h1>A</h1>
<C />
<Link href="/b">B</Link>
</div>
);
}
page B:
import C from "@/components/test";
import Link from "next/link";
export default function B() {
return (
<div>
<h1>B</h1>
<C />
<Link href="/a">A</Link>
</div>
);
}
component C:
import { useEffect } from "react";
export default function C() {
useEffect(() => {
console.log(1);
}, []);
return <div>component C</div>;
}
If you are running your app in development mode then this issue happens. To fix this issue just open next.config.js file and change reactStrictMode to false like below:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
presets: ["next/babel"]
};
module.exports = nextConfig;
If you are using react 18+, it can be caused by the StrictMode
You can remove the StrictMode to test, if it works without the StrictMode, probably you are making it wrong.
See more about useEffect on React 18
Notes:
console.log into a useEffect is silenced on the second render (see the official note:)In React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where a workaround can be used.
Starting from React 18, React does not suppress any logs. However, if you have React DevTools installed, the logs from the second call will appear slightly dimmed. React DevTools also offers a setting (off by default) to suppress them completely.
[]) is not a hook to execute when the component is mounted. (see the official note:)If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.
If you pass an empty array ([]), the props and state inside the effect will always have their initial values. While passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model, there are usually better solutions to avoid re-running effects too often. Also, don’t forget that React defers running useEffect until after the browser has painted, so doing extra work is less of a problem.