🔥 Deep Clone — глубокое копирование объектов

Когда копируете объект через {...obj}, вложенные структуры остаются по ссылке. Меняете копию → меняется оригинал.

🔤 Два способа глубокого копирования:

Ограниченный, но быстрый для простых структур

const clone = (obj) => JSON.parse(JSON.stringify(obj));

Современный универсальный API (Chrome 98+, Firefox 94+, Node 17+, Safari 15+)

const clone = (obj) => structuredClone(obj);

🔤 Пример в React:

const addItem = (newItem) => {
  const clonedState = structuredClone(state);
  clonedState.items.push(newItem);
  setState(clonedState);
};

⚠️ Глубокое копирование — дорогая операция. В React его используют точечно, а не для всего состояния. В крупных приложениях лучше использовать immer или нормализованные структуры данных.

🔤 Когда deep clone действительно нужен:

— Копирование вложенных объектов и графов
— Redux / Zustand, когда нельзя мутировать state
— Снимки данных перед трансформациями
— Копирование конфигураций, где нет функций и методов

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #js #react

📌 npm explain — кто притащил эту зависимость

Команда (алиас npm why с npm 7+) показывает полную цепочку зависимостей — кто, через что и зачем тянет пакет.

🔢 Раздутый бандл

Нужно узнать, откуда lodash в зависимостях:

npm explain lodash

Получаете цепочку: проект → axios → follow-redirects → lodash.
Сразу видно, что обновлять или менять.

🔢 Конфликт версий

Подозрение на несколько React одновременно:

npm ls react

Команда покажет каждую версию и её источник.

🔢 Security audit

Нашлась уязвимая транзитивная зависимость:

npm explain vulnerable-package

Понимаете, через какой пакет она попала — обновляете или заменяете.

🔢 Чистка проекта перед продом

Проверить только прямые зависимости:

npm ls --depth=0

Быстро находит забытый мусор в package.json.

🧶 Yarn альтернатива

yarn why package-name

Работает так же, с более подробным выводом.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #npm

📎 Шпаргалка для подготовки к React-собеседованию

🔵 30 самых популярных вопросов
🔵 Развёрнутые ответы с примерами кода
🔵 JavaScript, React, Redux, веб-технологии
🔵 Источники и ссылки на документацию

Скачай, изучи, получи оффер 👨‍💻

🔗 Источник

🐸 Библиотека фронтендера

#readme #react