> Как работает useState в Next.js и является ли состояние глобальным или локальным для страницы (React, JavaScript, Next.js)

Короткий ответ

useState в Next.js работает так же, как в React - это хук для управления локальным состоянием компонента. Состояние всегда локально для экземпляра компонента, а не глобально для страницы. При переходах между страницами (client-side navigation) состояние сбрасывается, если компонент размонтируется. Для глобального состояния используются стейт-менеджеры (Redux, Zustand) или React Context.

Подробное объяснение

useState - это базовый React-хук, который Next.js наследует без изменений. Он создаёт локальное состояние в функциональном компоненте. Ключевая особенность: состояние привязано к конкретному экземпляру компонента в Virtual DOM. Если компонент размонтируется (например, при переходе на другую страницу), состояние теряется.

В контексте Next.js важно различать:

• Локальное состояние компонента - живёт внутри компонента, не разделяется между страницами.
• Состояние страницы - если компонент определён как страница в pages/ или app/, его useState всё равно локальный. При навигации через <Link> или router.push страница размонтируется, и состояние сбрасывается.
• Глобальное состояние - требует внешних решений (Context API, Redux, Zustand), которые хранят состояние вне компонента.

Next.js не добавляет никакой магии к useState. Server Components (в App Router) не могут использовать хуки - useState доступен только в Client Components ('use client').

На практике

При разработке на Next.js нужно учитывать:

• Если состояние должно сохраняться между переходами по страницам, используйте URL-параметры, localStorage, или глобальный стейт-менеджер.
• Для временных UI-состояний (открытый модал, форма) useState идеален - он автоматически очищается при уходе со страницы.
• В App Router избегайте useState в Server Components - вынесите интерактивную логику в отдельные Client Components.
• При SSR/SSG useState не влияет на серверный рендеринг - он инициализируется только на клиенте.

Пример кода

JSX
// pages/profile.js - страница в Pages Router
import { useState } from 'react';

export default function Profile() {
  const [name, setName] = useState(''); // локальное состояние

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Привет, {name}</p>
    </div>
  );
}

// При переходе на /about и обратно - name сбросится

JSX
// app/profile/page.js - App Router
'use client';

import { useState } from 'react';

export default function ProfilePage() {
  const [count, setCount] = useState(0); // только на клиенте

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Как отвечать на собеседовании

Начните с чёткого определения: useState - это React-хук, Next.js его не модифицирует. Подчеркните локальность состояния и объясните, почему оно не глобальное. Упомяните разницу между Pages Router и App Router (Client Components vs Server Components). Приведите пример, когда состояние сбрасывается при навигации. Если спросят про глобальное состояние - предложите Context или Redux, но укажите, что это не встроенная возможность Next.js.

Что проверяет интервьюер

• Понимание базового React (хуки, жизненный цикл компонента).
• Знание особенностей Next.js (SSR, роутинг, различие между серверными и клиентскими компонентами).
• Умение различать локальное и глобальное состояние.
• Осознание, что Next.js - это фреймворк поверх React, а не замена.

Типичные ошибки

• Утверждение, что useState в Next.js глобальный для страницы - это неверно, состояние привязано к компоненту.
• Попытка использовать useState в Server Components без директивы 'use client' - приведёт к ошибке.
• Ожидание, что состояние сохранится при переходе между страницами через <Link> - оно сбросится, если компонент размонтируется.
• Путаница между состоянием страницы и состоянием приложения - первое локально, второе требует отдельного управления.