Лишние рендеры в Next.js

Question

Я делаю приложение на Next.js. Я создал простенький компонент Header, который отображает ссылки для навигации по страницам приложения. В зависимости от пути подчёркивается именно та ссылка. которая соответствует текущий странице. Вот его код:

'use client'
import {FC, memo} from 'react'
import Image from 'next/image'
import Link from 'next/link'
import styles from './header.module.scss'
import logo from '@/assets/Logo.png'
import { usePathname } from 'next/navigation'

type navMenu = {
  item: string,
  rout: string
}

const Header: FC = () => {
  const path = usePathname();
  console.log(path);
  const navItems: Array<navMenu> = [
    {item: 'HOME', rout: '/'},
    {item: 'BLOG', rout: '/blog'},
    {item: 'CATEGORIES', rout: '/categories'},
    {item: 'PICK CATEGORY', rout: '/pickcategory'},
    {item: 'ABOUT US', rout: '/aboutus'},
    {item: 'CONTACT US', rout: '/contactus'},
  ];
  return (
    <header className={styles.header}> 
      <Image
        src={logo}
        className={styles.logo}
        width={176}
        height={40}
        alt="Logo"
        priority
      />
      <nav className={styles.navigate}>
        {navItems.map((el) =>{
            return( 
                <Link href={el.rout} key={el.item} 
                  className={path == el.rout ? styles.active : styles.navLink}>
                  {el.item}
                </Link>
            )
        })}
      </nav>
    </header>
  )
}

Вот так это выглядит

Для проверки в компоненте Header, я вывожу в консоль путь текущий странице. Но я заметил, что в консоль мне выводится 2, а иногда и 4 значения.

Я не понимаю этого поведения. Почему выполняются лишние рендеры при переходи по ссылкам? И почему эти рендеры могут выполнится 2, а иногда 4 раза?

Answer 1

Скорей всего у вас стоит react strict mode (его можно выключить в nextjs https://nextjs.org/docs/pages/api-reference/next-config-js/reactStrictMode) . В режиме node_env отличном от production он вызывает хуки и рендеры дважды, подробнее можно почитать тут https://react.dev/reference/react/StrictMode.

БЛОГ НА HUSL

Лишние рендеры в Next.js

Ответы (1 шт):