Почему компонент в Next JS перерисовывает два раза?

Question

[GNG999]

Имеется проект со след структурой


app/page.tsx

import ECommerce from "@/components/Dashboard/E-commerce";
import { Metadata } from "next";
import DefaultLayout from "@/components/Layouts/DefaultLayout";

import { getSession } from "@/utils";
import { redirect } from "next/navigation";
import { cookies } from "next/headers";

export const metadata: Metadata = {
  title:
    "Next.js E-commerce Dashboard | TailAdmin - Next.js Dashboard Template",
  description: "This is Next.js Home for TailAdmin Dashboard Template",
};

export default async function Home() {
  const cookieStore = cookies();
  const session = cookieStore.get("user_guid");
  if (!session) {
    redirect("/auth/signin");
  }
  return (
    <>
      <ECommerce />
    </>
  );
}

"use client";
import dynamic from "next/dynamic";
import React, { useEffect, useState } from "react";
import { getAllProducts } from "@/service/product";

const ECommerce: React.FC = () => {
  console.log("ECommerce");
  // const [page, setPage] = useState("1");
  // const getProducts = async (page: string) => {
  //   await getAllProducts(page);
  // };
  //
  // useEffect(() => {
  //   getProducts(page);
  // }, [page]);

  return (
    <>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5"></div>

      <div className="mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5">
        <div className="col-span-12 xl:col-span-8"></div>
      </div>
    </>
  );
};

export default ECommerce;

Почему E-commerce перерисовывает два раза: если там делать запрос в юзэффекте (то что закомментено), то он два раза вызывается

Answer 1

[Алексей Уколов]

React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs (props, state, and context).
Components breaking this rule behave unpredictably and cause bugs. To help you find accidentally impure code, Strict Mode calls some of your functions (only the ones that should be pure) twice in development.

https://react.dev/reference/react/StrictMode#fixin...

Since Next.js 13.4, Strict Mode is true by default with app router. You can still disable Strict Mode by setting reactStrictMode: false.

https://nextjs.org/docs/app/api-reference/next-con...