CODEWITHSUNDEEP
javascriptreactjsnext.js
Rostyk
Rostyk

Reputation: 1159

Next.js renders element twice

On the first image you can see next.js rendered this element twice

I used tables and thought that it is because of them but then I tried to remove tables and put jut and it still renders twice so I don't know what it can be.

Next.js does not renders only that element but the first from this object

const Sections = {
  1: Locations,
  0: Departments, // here it will render this one twice
  2: Managers,
  3: JobTitles,
};

Maybe it has something to do with useState and my statemanagment in this code below

Component that renders twice.

const Locations = () => {
  return <div>hdjsad</div>;
};

enter image description here

enter image description here

// Tab Sections
import Locations from ''
import Departments from ''
import Managers from ''
import JobTitles from ''

import Icons from "../../Icons";
import TabItem from "./TabItem";

const tabs_text = ["Locations", "Departments", "Managers", "Job Titles"];

const Sections = {
  0: Locations, // THIS IS THE COMPONENT WHICH RENDERS TWICE
  1: Departments,
  2: Managers,
  3: JobTitles,
};

const SettingsTab = () => {
  const [active, setActive] = useState<number>(0);

  const select = useCallback((id: number) => {
    return () => setActive(id);
  }, []);

  const ActiveSection = useMemo(() => Sections[active], [active]);

  return (
    <section className={"mb-[24px]"}>
      <header
        className={"w-full flex items-center mb-[34px] pl-[24px] pr-[12px]"}
      >
        <div className={"flex space-x-[8px] !mb-0 overflow-x-scroll"}>
          {tabs_text.map((tab_text, i) => {
            return (
              <div onClick={select(i)} key={i}>
                <TabItem active={+active === i}>{tab_text}</TabItem>
              </div>
             
            );
          })}
        </div>

        <ImportLocationsAndFilter />
      </header>

      <ActiveSection />
      
    </section>
  );
};

APP.js

import { AppProps } from "next/app";

import "antd/dist/antd.css";

import "../styles/global.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

Upvotes: 2

Views: 3484

Answers (4)

Hamid Tanhaei
Hamid Tanhaei

Reputation: 39

In this case re-installing pnpm was helpful for us.

We were using pnpm on the project, and this issue was happening on only one system (windows).

Uninstall and re-installing pnpm using npm solved the problem.

Upvotes: 0

Michał Tęgi
Michał Tęgi

Reputation: 25

It's strange behaviour / bug related to next.js ssr to fix it wrap your Component in a div like this:

function MyApp({ Component, pageProps }: AppProps) {
  return <div id=#root><Component {...pageProps} /></div>;
}

Upvotes: -1

Rostyk
Rostyk

Reputation: 1159

I just imported my tabs dynamically and set SSR: false.

It has to do something with next.js hydration.

https://nextjs.org/docs/advanced-features/dynamic-import

dynamic(
  () => import(""),
  {
    ssr: false,
  }
);

Upvotes: 3

Mason Clark
Mason Clark

Reputation: 221

I can't comment yet so I'll do it here. I know react says in the official docs to never rely on UseMemo or Use callback for functionality. It says you should create your application so it works without them, and then add them for performance reasons. What would happen if you took the useMemo out and put

ActiveSelection = Selections[active]

I don't think it'll fix your problem but it might give you more insight into what's causing it.

Upvotes: 1

Related Questions