CODEWITHSUNDEEP
javascriptreactjsnext.js
Itsme
Itsme

Reputation: 196

How to prevent components from re-rendering?

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>;
}

Upvotes: 1

Views: 1991

Answers (2)

DCodeMania
DCodeMania

Reputation: 1157

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;

Upvotes: 2

Henrique Holtz
Henrique Holtz

Reputation: 414

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:

  • In the React 17, the 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.

  • The useEffect with dependency array empty ([]) 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.

Upvotes: 0

Related Questions