const original = {
name: "Мощный WEB",
date: new Date(),
map: new Map([['key', 'value']]),
set: new Set([1, 2, 3]),

arr: [1, 2, 3],
nested: { a: 1, b: 2 } };
const clone = structuredClone(original); // Теперь clone — это полноценная копия console.log(clone !== original); // true
console.log(clone.date instanceof Date); // true
console.log(clone.map instanceof Map); // true

Всё работает "из коробки": Map, Set, Date, ArrayBuffer, TypedArray, циклические ссылки.

Почему это лучше JSON.parse(JSON.stringify())

В отличие от устаревшего JSON-подхода, structuredClone() корректно обрабатывает циклические ссылки - там, где JSON.stringify() выбрасывает ошибку, новый метод спокойно создаёт копию. Он сохраняет типы данных: Date остаётся датой, а не превращается в строку, Map и Set остаются коллекциями, а не пустыми объектами. Значение undefined не пропадает, а копируется как есть, а RegExp сохраняет своё состояние, а не превращается в пустой объект. Единственное ограничение — функции не копируются: в JSON.parse(JSON.stringify()) они просто исчезают, а structuredClone() в таких случаях выбрасывает ошибку DataCloneError.

Все современные браузеры ,поддерживают данный метод.

Используйте ,его даже во времена AI и "Вайбкодинга", знать такие вещи необходимо.

Если интересны технологии веб-разработки ,подписывайте на мои каналы в Telegram и MAX.

Как работает use()

use() -это хук, который принимает промис и «разворачивает» его прямо в теле компонента. Если промис ещё не завершился, React приостанавливает рендеринг компонента. Когда промис резолвится, компонент перерендеривается с полученными данными.

import { use, Suspense } from 'react';
function UserProfile({ userId })
{ const user = use(fetchUser(userId));
return <div>{user.name}</div>; }

Здесь fetchUser(userId) возвращает промис. use() блокирует рендеринг до тех пор, пока этот промис не будет разрешён.

Роль Suspense

Для корректной работы use() необходимо использовать компонент Suspense. Он отлавливает состояние «приостановки» дочернего компонента и показывает fallback-интерфейс.

function App()

{ return

( <Suspense fallback={<div>Загрузка...</div>}>

<UserProfile userId="123" />

</Suspense> ); }

Пока UserProfile ожидает данные, пользователь видит сообщение «Загрузка...». После завершения запроса fallback заменяется на готовый UI.

Обработка ошибок

Ошибки, возникающие внутри use(), не обрабатываются автоматически. Для их перехвата используется ErrorBoundary — компонент, который ловит ошибки в дочерних компонентах.

<ErrorBoundary

fallback={<div>Ошибка загрузки</div>}>

<Suspense fallback={<div>Загрузка...</div>}>

<UserProfile userId="123" />

</Suspense>

</ErrorBoundary>

Это стандартный для React подход к обработке ошибок.

Детали реализации

use() не создаёт новый запрос при каждом рендере. Если переданный промис уже был разрешён, use() возвращает данные мгновенно.

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

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

Сравнение: старый подход vs новый подход

Без use() (традиционный способ):

function UserProfile({ userId })

{ const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => { fetchUser(userId) .then(setUser) .catch(setError) .finally(() => setLoading(false));

}, [userId]);

if (loading) return <div>Загрузка...</div>;

if (error) throw error;

return

<div>{user.name}</div>; }

С use() (новый способ):

function UserProfile({ userId })

{ const user = use(fetchUser(userId));

return <div>{user.name}</div>; }

Код сокращается в 3–4 раза, логика становится декларативной.

use() — это новый инструмент в экосистеме React, который делает код более читаемым и предсказуемым. В сочетании с Suspense и ErrorBoundary он позволяет строить компоненты, которые описывают что должно отображаться, а не как это должно загружаться. Это шаг в сторону декларативной модели, к которой React стремится с момента своего появления.

Если вам интересна тема веб-разработки, я также публикую разборы других кейсов в своем Telegram-канале и на Максе. Буду рад единомышленникам.

Памяти при этом ест на 18–26% меньше. Ошибки в редакторе теперь появляются почти мгновенно, а не через 17 секунд.

По итогу ts,стал в 8–12 раз быстрее.

чему нужно быть готовым

TypeScript 7.0 - это не просто "поставил и забыл". Есть несколько важных изменений, которые могут задеть старые проекты :

• Строгий режим включен по умолчанию. Это хорошо для новых проектов, но на старых может вызвать сотни новых ошибок типов.

• Убрана поддержка устаревшего. Больше нельзя компилировать под ES5, использовать старые модульные системы (AMD, UMD, SystemJS) и некоторые устаревшие опции в tsconfig.json.

• Для инструментов API пока нет. Стабильный программный API для работы с компилятором появится только в TypeScript 7.1. Поэтому сейчас TypeScript 6 и 7 могут работать параллельно в одном проекте через специальный пакет совместимости

Если вам интересна тема веб-разработки, я также публикую разборы других кейсов в своем Telegram-канале и на Максе. Буду рад единомышленникам.