JavaScript в картинках | Программирование

Отменяйте «устаревшие» запросы при живом поиске: 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) th…

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 в дочерний компонент …

Fuse.js — библиотека для «нечёткого» поиска по массивам прямо в браузере: находит результаты с опечатками и частичными совпадениями, поддерживает веса полей и работает без сервера. Быстрый старт: const fuse = new Fuse(items, { keys: ['title', 'tags'], threshold: 0.3 }); const results = fuse.search('react hooks'); — получите отсортированный по релевантности список. #javascript #гайды #frontend #сайтыподключ

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

Разница между var, let и const — в области видимости и возможности переназначения. var имеет функциональную область, поднимается с инициализацией undefined и допускает повторное объявление; let/const — блочная область, поднимаются без инициализации (TDZ) и не позволяют повторно объявлять в том же блоке. const запрещает переназначать переменную, но свойства объектов и элементы массивов менять можно; по умолчанию …

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

Если список рендерится медленно, проверьте, не пересоздаются ли функции-колбэки на каждый рендер. Оберните дочерний компонент в React.memo, а обработчики в родителе — в useCallback(fn, [deps]); так React отследит неизменённые ссылки и перерисует только обновившиеся элементы. #react #hooks #гайды #javascript

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

Сократите стартовый бандл, перенеся тяжёлые зависимости в динамический import(): await import('./chart.js') - вызывается только при открытии нужного блока. Webpack/Vite автоматически вынесет код в отдельный чанκ, ускорив First Paint и снизив initial payload. #javascript #фишки #performance #frontend

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

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

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