Next JS Сборщик ПК

Space of React

требуется вход

Войдите, чтобы смотреть видео

Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.

Войти Создать аккаунт — бесплатно

Закончили урок?

Войдите, чтобы отмечать прогресс

Войти

Урок

Next JS Сборщик ПК — УрокМодальное окно сохранения сборки — Next JS Сборщик ПК | Max Roslow | Space of React

componentIds из selectedByCategory


const componentIds = useMemo(() => Object
    .values(selectedByCategory)
    .filter((component): component is Component => component !== null)
    .map((component) => component.id)
, [selectedByCategory])

Логика:

Object.values(selectedByCategory) — превращает объект в массив значений
selectedByCategory имеет структуру: { cpu: Component|null, gpu: Component|null, ... }
.filter() убирает null значения (невыбранные категории) с type guard
.map() извлекает id каждого компонента
Результат: ["1", "22", "7", "15", "31", "42", "56", "71"]

selectedByCategory тип:


const [selectedByCategory, setSelectedByCategory] = useState<Record<ComponentType, Component | null>>(

Применение: componentIds.join(',') → <input name="componentIds" value="1,22,7,15..."/> → FormData для Server Action.

Пересчитывает только при изменении выбора комплектующих, оптимизируя производительность.

useActionState

useActionState — новый React хук из Next.js 16 для работы с Server Actions, заменяет useFormState + ручную передачу action.

Синтаксис:


const [state, formAction, isPending] = useActionState(serverAction, initialState)

Возвращает:

state — текущее состояние (результат выполнения action)
formAction — привязанный action для <form action={formAction}>
isPending — состояние выполнения (заменяет useFormStatus().pending)

Типизация Server Action:


// app/actions.ts
'use server'
interface State {
  status: 'idle' | 'success' | 'error'
  error?:

Полное использование:


const [state, formAction, isPending] = useActionState(saveBuildAction, { status: 'idle' })

Ключевые особенности:

Автоматическая оптимистичность — UI обновляется до ответа сервера
Встроенная типизация — state типизирован через return Server Action
Нативная интеграция с <form> — не нужны react-hook-form/zod
_prevState — позволяет читать предыдущее состояние на сервере
Параллельные вызовы работают корректно

Преимущество над старым подходом: одна строка связывает форму + состояние + pending + ошибки без внешних библиотек.