{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue()"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue(value)"},{"type":"text","text":" — откладывает обновление значения,"},{"type":"hardBreak"},{"type":"text","text":"чтобы React мог "},{"type":"text","marks":[{"type":"bold"}],"text":"сначала отрендерить быстрые и важные части интерфейса"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а “тяжёлые” или асинхронные части обновить чуть позже."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Иными словами:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React делает "},{"type":"text","marks":[{"type":"bold"}],"text":"UI отзывчивым"},{"type":"text","text":", не блокируя рендеринг медленных компонентов."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Простое объяснение"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Представь поле поиска, где при каждом вводе символа идёт запрос на сервер:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":" setQuery(e.target.value)} />\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проблема:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"пользователь быстро печатает — "},{"type":"text","marks":[{"type":"code"}],"text":"query"},{"type":"text","text":" меняется на каждый символ;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"каждый рендер запускает фильтрацию или сетевой запрос;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI начинает “лагать” (тормозить при вводе)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚛️ 1. Как решает "},{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useState, useDeferredValue, Suspense } from 'react';\nimport useSWR from 'swr';\n\nconst fetcher = (url) => fetch(url).then(r => r.json());\n\nfunction SearchResults({ query }) {\n const { data } = useSWR(`/api/search?q=${query}`, fetcher, { suspense: true });\n return

;\n}\n\nexport default function Search() {\n const [query, setQuery] = useState('');\n const deferredQuery = useDeferredValue(query);\n\n return (\n <>\n setQuery(e.target.value)}\n placeholder=\"Поиск...\"\n />\n Загрузка...

}>\n \n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Что происходит:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь быстро вводит текст ("},{"type":"text","marks":[{"type":"code"}],"text":"query"},{"type":"text","text":" обновляется мгновенно)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"не спешит обновлять тяжёлый компонент"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"SearchResults"},{"type":"text","text":") для каждого символа."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Он "},{"type":"text","marks":[{"type":"bold"}],"text":"приостанавливает"},{"type":"text","text":" обновление "},{"type":"text","marks":[{"type":"code"}],"text":"deferredQuery"},{"type":"text","text":", пока не станет “свободен”."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Как только пользователь перестал активно вводить → React обновляет "},{"type":"text","marks":[{"type":"code"}],"text":"deferredQuery"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 В итоге:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"поле ввода остаётся отзывчивым;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"дорогие вычисления и запросы не блокируют UI."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔬 2. Поведение на практике"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Событие"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"query"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"deferredQuery"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает React"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь набирает \"React\""}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"быстро меняется: R → Re → Rea → ..."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"остаётся позади"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React рендерит только input"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь остановился"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null}}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"догоняет "},{"type":"text","marks":[{"type":"code"}],"text":"query"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"загружает данные для \"React\""}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 3. Отличие от "},{"type":"text","marks":[{"type":"code"}],"text":"startTransition()"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хук"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue(value)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"откладывает "},{"type":"text","marks":[{"type":"italic"}],"text":"использование значения"},{"type":"text","text":" (реактивная версия)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"startTransition(callback)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"откладывает "},{"type":"text","marks":[{"type":"italic"}],"text":"выполнение обновления состояния"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример эквивалентного поведения:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// вариант с startTransition\nimport { startTransition } from 'react';\nfunction onChange(e) {\n const value = e.target.value;\n setImmediateQuery(value); // обновляем быстро (input)\n startTransition(() => setDeferredQuery(value)); // отложенно — поиск\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue()"},{"type":"text","text":" делает то же самое, но декларативно:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const deferredQuery = useDeferredValue(query);\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚡ 4. Типичные кейсы использования"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Кейc"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔍 "},{"type":"text","marks":[{"type":"bold"}],"text":"Поиск"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"откладывает обновление списка результатов, чтобы ввод не лагал"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📜 "},{"type":"text","marks":[{"type":"bold"}],"text":"Большие списки"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновляет рендер списка чуть позже, чтобы UI оставался отзывчивым"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚛️ "},{"type":"text","marks":[{"type":"bold"}],"text":"Suspense-загрузка данных"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"позволяет показывать старые данные, пока новые подгружаются"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 "},{"type":"text","marks":[{"type":"bold"}],"text":"Фильтры / сортировки"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не перерендеривает таблицу при каждом клике"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📊 "},{"type":"text","marks":[{"type":"bold"}],"text":"Графики и визуализация"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"рендерит обновления только когда React “свободен”"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 5. Пример с визуальным эффектом (высокая нагрузка)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function HeavyList({ filter }) {\n const items = Array.from({ length: 5000 }, (_, i) => `Элемент ${i}`);\n const filtered = items.filter(i => i.toLowerCase().includes(filter.toLowerCase()));\n return (\n

\n );\n}\n\nexport function Search() {\n const [filter, setFilter] = useState('');\n const deferredFilter = useDeferredValue(filter);\n\n return (\n <>\n setFilter(e.target.value)}\n placeholder=\"Фильтр...\"\n />\n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔍 При быстром вводе:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"поле ввода реагирует мгновенно (рендер “не блокируется”);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"список обновляется с небольшой задержкой (чуть позже)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 6. Как работает “под капотом”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"возвращает "},{"type":"text","marks":[{"type":"bold"}],"text":"“задержанную копию” значения"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"помечает обновления, которые зависят от него, как "},{"type":"text","marks":[{"type":"bold"}],"text":"незначительные"},{"type":"text","text":" (low priority);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React выполняет эти обновления "},{"type":"text","marks":[{"type":"bold"}],"text":"только когда UI свободен"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"если во время ожидания приходит новое значение — старое игнорируется."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это часть "},{"type":"text","marks":[{"type":"bold"}],"text":"React Concurrent Rendering"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"нового механизма, где React сам решает, "},{"type":"text","marks":[{"type":"bold"}],"text":"что обновить сначала, а что подождёт"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 ИТОГ"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что делает"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Зачем нужно"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔄 Отложенное обновление значения"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"предотвращает лаги при частых обновлениях"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚛️ Не блокирует ввод и быстрые обновления"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"UI остаётся отзывчивым"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🌀 Позволяет плавно работать с Suspense"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"старые данные остаются на экране"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ Использует низкий приоритет рендера"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React делает “умный” план обновлений"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔍 Отлично подходит для поиска, фильтров, списков"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"уменьшает лишние запросы и рендеры"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💬 Кратко:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useDeferredValue()"},{"type":"text","text":" — это способ сказать React:"},{"type":"hardBreak"},{"type":"text","text":"“Вот новое значение, но не спеши с его рендером — обнови, когда будет время.”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Он делает интерфейс "},{"type":"text","marks":[{"type":"bold"}],"text":"плавным и отзывчивым"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"особенно при "},{"type":"text","marks":[{"type":"bold"}],"text":"асинхронной загрузке данных или рендере тяжёлых компонентов"},{"type":"text","text":"."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что делает useDeferredValue() при работе с асинхронностью?

Комментарии