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.

Создал небольшое расширение для Chrome, которое возвращает стандартное поведение браузера.

Расширение:

✅ разрешает обычную вставку через Ctrl+V;

✅ возвращает копирование и вырезание;

✅ позволяет выделять текст;

✅ возвращает контекстное меню;

✅ работает с динамически появляющимися полями;

✅ поддерживает встроенные фреймы.

🌐 Поддерживаемые сайты

fssp.gov.ru

госавтоинспекция.рф

мвд.рф

их поддомены.

🚀 Как пользоваться

Никаких дополнительных кнопок или отдельного интерфейса нет:

Устанавливаете расширение.

Открываете нужную форму.

Пользуетесь обычными командами браузера.

Ctrl+V, Ctrl+C, выделение текста и контекстное меню снова работают привычным образом.

🔒 Безопасность и приватность

Расширение:

не читает содержимое буфера обмена;

не собирает введённые данные;

ничего никуда не отправляет;

не содержит аналитики;

не требует регистрации;

не выполняет фоновые запросы;

не загружает удалённый код.

Всё выполняется локально в браузере. Скрипт запускается только на перечисленных выше сайтах.

⚠️ Важное уточнение

Расширение не связано с государственными органами и не является их официальным продуктом. Оно не запрашивает доступ ко всем сайтам — только к доменам ФССП, Госавтоинспекции и МВД.

Оно не заполняет и не отправляет обращения автоматически — только снимает искусственную блокировку стандартных функций браузера.

📦 Установка

Расширение опубликовано в Chrome Web Store:

https://chromewebstore.google.com/detail/Вставка для ФССП, ГИБДД и МВД/fdgmahdeooeafffgfbiodnmagbpnpola?hl=ru&authuser=1

💬 Обратная связь

Если знаете другие официальные сайты, на которых отключены копирование, выделение текста или вставка через Ctrl+V, — напишите в комментариях.

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

Буду благодарен, если проверите расширение на разных формах и напишете, где оно работает или требует доработки.

Как работает 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-канале и на Максе. Буду рад единомышленникам.