import {useEffect, useState} from "react"

export function Data({ url }) {
  const [isLoading, setIsLoading] = useState(true)
  const [isError, setIsError] = useState(false)
  const [data, setData] = useState()

  useEffect(() => {
    setIsError(false)
    setIsLoading(true)
    setData(undefined)

    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(() => setIsError(true))
      .finally(() => setIsLoading(false))
  })

  return isLoading ? (
    
Загрузка...
  ) : isError ? (
    
Ошибка
  ) : (
    
{JSON.stringify(data, null, 2)}
  )
}

// package.json
"dependencies": {
  "react": "experimental",
  "react-dom": "experimental"
}

import {use} from "react"

export function Data({ url }) {
  const data = use(fetch(url).then(res => res.json()))

  return 
{JSON.stringify(data, null, 2)}
}

export default function App () {
  const [url, setUrl] = useState(URL.USERS)

  return (
    <>
      Загрузка...

import React from "react"

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error
    }
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback
    }

    return this.props.children
  }
}

export default ErrorBoundary;

export default function App () {
  const [url, setUrl] = useState(URL.USERS)

  return (
    <>
      Упс! Произошла ошибка.

Если промис отклонится, ErrorBoundary отрисует fallback.

Правила использования use()

use() гибче обычных хуков: его можно вызывать в условии или в цикле. Это полезно для ленивой загрузки или для выбора источника данных по пропам.

Пример условной загрузки:

export function Data({ url, shouldFetch }) {
  let data = "Данные по умолчанию"

  if (shouldFetch) {
    data = use(fetch(url).then(res => res.json()))
  }

  return 
{JSON.stringify(data, null, 2)}
}

use() также может принимать Context:

export function Data({ url, shouldFetch }) {
  let data = "Данные по умолчанию"

  if (shouldFetch) {
    data = use(MyContext)
  }

  return 
{JSON.stringify(data, null, 2)}
}

Важно: useContext не позволит вам вызывать его условно, а use() — позволит.

Когда use() не подходит

• Вы используете стабильную production‑ветку React (non‑experimental). use() недоступен.
• Вам нужны встроенные возможности кеширования, повторного запроса, фонового обновления — для этого лучше React Query или SWR.
• Желаете прогнозируемости хуков в больших командах — условные вызовы хуков могут усложнить ревью и понимание.

Альтернативы и сравнение

• React Query / TanStack Query: богатая функциональность кеширования, управление синхронизацией, retries, инвалидирование.
• SWR: минималистичный подход с кешем и фокусом на простоте. use() хорош для простых случаев и при tight интеграции с Suspense.

Сравнение (qualitative):

• Простота: use() > SWR > React Query
• Кеширование: React Query > SWR > use() (зависит от реализации)
• Готовые стратегии retries/инвалидации: React Query > SWR > use()

Модель мышления (эвристики)

• Если компонент просто отображает результат одного запроса — use() сократит код.
• Для сложных потоков данных с несколькими зависимостями — используйте специализированные решения.
• Всегда оборачивайте use() на уровне родителя в Suspense и Error Boundary.

Мини-методология миграции

1. Найдите компоненты с fetch в useEffect + useState.
2. Убедитесь, что проект может использовать experimental React (или создайте ветку для эксперимента).
3. Замените useEffect+useState на одно выражение data = use(fetch(…)).
4. Оберните компонент в Suspense; добавьте ErrorBoundary.
5. Тестируйте SSR и гидратацию (см. заметки ниже).
6. Откатите, если поведение не совпадает (см. runbook).

Runbook отката (коротко)

• Если после миграции обнаружены ошибки в проде: откатить на предыдущую сборку и откатить package.json на стабильную версию React.
• Для локализации проблемы: временно замените use() на исходный useEffect-ветвь и сравните ответы/тайминги.

Роль‑ориентированные чек‑листы

Для разработчика:

• Убедиться, что версия React experimental.
• Добавить Suspense вокруг компонента.
• Обработать ошибки через ErrorBoundary.
• Тестировать поведение при отмене навигации/быстрой смене пропов.

Для ревьюера:

• Проверить, что условные вызовы use() оправданы.
• Убедиться в наличии fallback для Suspense.
• Оценить влияние на SSR и размер бандла.

Для тимлида/архитектора:

• Решить политику использования experimental API.
• Определить стратегию миграции и метрики успеха.

Диаграмма принятия решения

flowchart TD
  A[Нужна быстрая загрузка одного запроса?] -->|Да| B[Использовать use'' + Suspense]
  A -->|Нет| C[Нужны кеш/повторные запросы?]
  C -->|Да| D[React Query / SWR]
  C -->|Нет| E[Стандартный useEffect/useState]

Дополнительные заметки по SSR и гидратации

• use() и Suspense для данных всё ещё развиваются в контексте SSR. Проверьте, как ваш рендеринг на сервере обрабатывает ожидание промисов.
• В некоторых случаях придётся реализовать серверное ожидание промисов вручную или использовать библиотеку, совместимую с серверным Suspense.

Безопасность и конфиденциальность

• Не храните чувствительные данные в общем клиентском кеше без шифрования.
• Всегда проверяйте URL и заголовки запросов на стороне сервера при SSR.

Критерии приёмки

• Компонент отрисовывает fallback при загрузке.
• При отказе запроса показывается UI из ErrorBoundary.
• Поведение до и после миграции совпадает в ключевых сценариях.
• Тесты покрывают успешный, ожидающий и ошибочный сценарии.

Резюме use() — мощный инструмент для сокращения шаблонного кода при загрузке данных в React. Он особенно удобен для простых компонентов и тесно интегрирован с Suspense и Error Boundary. Однако следует учитывать experimental‑статус, совместимость с SSR и требования команды. При правильном использовании он улучшает читаемость и сокращает количество boilerplate.

Факт‑бокс

• Статус: experimental — требует осторожности.
• Лучшее применение: простой запрос => отображение.
• Требуемая обёртка: Suspense + Error Boundary.

Глоссарий (1‑строчно)

• Suspense — механизм React для «ожидания» асинхронных результатов в рендере.
• Error Boundary — компонент-класса, который ловит ошибки в дочерних компонентах.
• SSR — серверный рендеринг.