Топ 5 javascript библиотек

#гайды #javascript #frontend | Javascript в картинках

Часто используемые API при разработке собственных проектов

#javascript #гайды #сайты | Javascript в картинках

Деструктуризация в JS: const {name, age} = user и const [first, , third] = arr экономят строки и сразу вытаскивают нужные поля из объектов или элементов из массивов. Используйте, когда нужно быстро «распаковать» данные без дополнительных переменных.
#гайды #javascript

Быстро отбираем нужные элементы: users.filter(u => u.isActive) создаёт новый массив, не трогая исходный — удобно для иммутабельных сторов и реактивных UI.
#javascript #гайды #frontend

Безопасная проверка вложенных свойств: user?.address?.city вернёт undefined без падения скрипта, если какого-то уровня нет. То же с функциями: callback?.() вызовется только при наличии callback. #javascript #гайды

map(), filter(), reduce() — три кита работы с массивами: map создаёт новый массив, преобразуя каждый элемент, filter отбирает нужные, reduce сворачивает всё к одному значению (сумма, объект, строка). Запомните порядок аргументов колбэка (item, index, array) и убирайте лишние, если не используете.
#гайды #javascript #массивы

​​localStorage переживает перезагрузку страницы: localStorage.setItem('theme', JSON.stringify({mode: 'dark'})).
При чтении используйте const {mode} = JSON.parse(localStorage.getItem('theme') || '{}'); — быстрый способ запомнить настройки пользователя без сервера.
#гайды #javascript #frontend

Деструктуризация объекта:
const { name, age } = user;
Избавляемся от user.name и user.age, код становится короче и чище, особенно в React-props и ответах API.
#javascript #гайды #frontend

useRef — способ хранить «что-угодно», не вызывая лишних рендеров: сохраняем id таймера setInterval в id.current, а при размонтировании чистим его; стейт не трогаем — компонент молчит, но таймер живёт.

#гайды #react #hooks #javascript #frontend

Сократите стартовый бандл, перенеся тяжёлые зависимости в динамический

import(): await import('./chart.js') - вызывается только при открытии нужного блока.

Webpack/Vite автоматически вынесет код в отдельный чанκ, ускорив First Paint и снизив initial payload.

#javascript #фишки #performance #frontend

Ускоряем массовые вставки в DOM

собирайте элементы в DocumentFragment и заполняйте его циклом и одним append вставляйте в нужный контейнер — браузер выполнит перерисовку лишь раз, без лишних reflow/paint.

#фишки #javascript #frontend #оптимизация

Если список рендерится медленно, проверьте, не пересоздаются ли функции-колбэки на каждый рендер.

Оберните дочерний компонент в React.memo, а обработчики в родителе — в useCallback(fn, [deps]);

так React отследит неизменённые ссылки и перерисует только обновившиеся элементы.

#react #hooks #гайды #javascript

Zod — библиотека для валидации данных в JS/TS: описываете схему, получаете типы из неё и безопасно парсите входные данные с понятными ошибками. Удобно проверять формы и ответы API, уменьшая количество багов в рантайме.

#javascript #гайды #frontend #сайты

Разница между var, let и const — в области видимости и возможности переназначения.

var имеет функциональную область, поднимается с инициализацией undefined и допускает повторное объявление;

let/const — блочная область, поднимаются без инициализации (TDZ) и не позволяют повторно объявлять в том же блоке.

const запрещает переназначать переменную, но свойства объектов и элементы массивов менять можно;

по умолчанию используйте const, let — когда реально нужно переназначение, var — избегайте.

#гайды #javascript #frontend

useEffect в React: кладите в массив зависимостей всё, что используется внутри эффекта (пропсы, стейт, функции), иначе получите устаревшие значения;

чтобы стабилизировать функции и объекты и не триггерить эффект лишний раз — оборачивайте их в useCallback/useMemo. Для подписок и таймеров возвращайте очистку (unsubscribe/clearInterval) из эффекта — она сработает при размонтировании и при изменении зависимостей.

Не выключайте правило react-hooks/exhaustive-deps — оно помогает не пропускать зависимости.

#react #javascript #гайды #frontend

Fuse.js — библиотека для «нечёткого» поиска по массивам прямо в браузере: находит результаты с опечатками и частичными совпадениями, поддерживает веса полей и работает без сервера.

Быстрый старт:

const fuse = new Fuse(items, { keys: ['title', 'tags'], threshold: 0.3 });
const results = fuse.search('react hooks');

— получите отсортированный по релевантности список.


#javascript #гайды #frontend #сайтыподключ

useMemo в React — кэшируем «дорогие» вычисления и фиксируем ссылочные значения, чтобы не дёргать лишние рендеры.

Пример:

const visible = useMemo(() => items.filter(it => it.title.includes(query)).sort(sorter[sortKey]), [items, query, sortKey]);

— пересчёт только при изменении зависимостей.

Стабилизация пропсов:

const columns = useMemo(() => [{id: 'name'}, {id: 'age'}], []);

передайте columns в дочерний компонент с React.memo — он не перерендерится из‑за новой ссылки.

Совет:
Применяйте useMemo для тяжёлых вычислений и стабилизации массивов/объектов в зависимостях; не используйте для побочных эффектов и не оборачивайте «на всякий случай».

#react #hooks #гайды #javascript #frontend

Отменяйте «устаревшие» запросы при живом поиске: AbortController защищает от гонок (когда медленный ответ перезаписывает свежие данные) и экономит трафик.

let controller;
async function search(query) {
controller?.abort(); // отменяем предыдущий
controller = new AbortController();
try {
const res = await fetch('/api/search?q=' + encodeURIComponent(query), { signal: controller.signal });
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
renderResults(data);
} catch (e) {
if (e.name !== 'AbortError') showError(e); // игнорируем отмену
}
}

Советы: добавьте debounce ввода (≈150–300 мс), при необходимости ставьте таймаут (setTimeout(() => controller.abort(), 8000)) и очищайте его в finally. В React храните контроллер в useRef и отменяйте в cleanup эффекта.

#фишки #javascript #frontend #performance #гайды