🔥9 полезных функций и хуков, которые пригодятся продвинутому React-разработчику для управления состоянием, оптимизацией и архитектурой компонентов


1. useDebounce

Позволяет "отложить" значение — полезно для ввода/поиска.

import { useEffect, useState } from 'react';

export function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

2. usePrevious

Возвращает предыдущее значение пропа или стейта.

import { useRef, useEffect } from 'react';

export function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

3. useOnClickOutside

Закрытие модалок, дропдаунов при клике вне.

import { useEffect } from 'react';

export function useOnClickOutside(ref: React.RefObject<HTMLElement>, handler: () => void) {
  useEffect(() => {
    const listener = (e: MouseEvent) => {
      if (!ref.current || ref.current.contains(e.target as Node)) return;
      handler();
    };
    document.addEventListener('mousedown', listener);
    return () => document.removeEventListener('mousedown', listener);
  }, [ref, handler]);
}

4. useIsMounted

Помогает избежать обновления состояния после размонтирования.

import { useEffect, useRef } from 'react';

export function useIsMounted() {
  const ref = useRef(false);
  useEffect(() => {
    ref.current = true;
    return () => { ref.current = false; };
  }, []);
  return ref;
}

5. useEventCallback

Запоминает последнюю версию колбэка без повторного рендера.

import { useRef, useCallback } from 'react';

export function useEventCallback<T extends (...args: any[]) => any>(fn: T): T {
  const ref = useRef(fn);
  ref.current = fn;
  return useCallback((...args: any[]) => ref.current(...args), []) as T;
}

6. useAsync

Асинхронный вызов с контролем загрузки, ошибок и результата.

import { useState, useCallback } from 'react';

export function useAsync<T>(asyncFn: () => Promise<T>) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<unknown>(null);

  const run = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await asyncFn();
      setData(result);
    } catch (e) {
      setError(e);
    } finally {
      setLoading(false);
    }
  }, [asyncFn]);

  return { loading, data, error, run };
}

7. useLocalStorage

Простой хук для хранения данных в localStorage.

import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const json = localStorage.getItem(key);
    return json ? JSON.parse(json) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

8. useMediaQuery

Работа с медиа-запросами в React без CSS.

import { useEffect, useState } from 'react';

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);

  useEffect(() => {
    const media = window.matchMedia(query);
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

9. useToggle

Бинарный переключатель состояния (on/off).

import { useCallback, useState } from 'react';

export function useToggle(initial = false) {
  const [state, setState] = useState(initial);
  const toggle = useCallback(() => setState(prev => !prev), []);
  return [state, toggle] as const;
}

✍️ @React_lib

Введение в Angular: основы и практические навыки

В ходе занятия познакомимся с основными концепциями Angular, разберем его ключевые компоненты и научимся создавать интерактивные и структурированные приложения. Что такое модули, компоненты, директивы, пайпы и сервисы, а также освоите работу с данными через привязку, настроите маршрутизацию и создадите простую форму с валидацией.

👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Поймут, как устроен Angular и как с ним работать.
- Сумеют самостоятельно создать простое одностраничное приложение.
- Освоят основы архитектуры приложения: компоненты, модули и маршруты.
- Получат опыт настройки форм и базовой проверки данных.
- Будут готовы к дальнейшему изучению Angular и построению полноценных проектов.

Бесплатный вебинар проходит в рамках курса “Angular Developer“

Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNzyP1

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Как работает комбинация clip + mask:

- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)

- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑‍🍳

👉 @frontend_1

💡 HTML Tip: Скачивание файлов одной строкой

Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке:

<a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a>

📌 Что важно знать:

– download — указывает браузеру, что нужно не открыть файл, а скачать его
– Можно задать имя файла прямо в атрибуте
– Работает только с ресурсами того же источника (same-origin)
– Поддерживает blob: и data: ссылки для скачивания сгенерированного контента

🔍 Важно: имя из download будет использоваться только если сервер не задал своё имя в заголовке Content-Disposition.

👉 @frontend_1

💬 Создаем чат на Vue с WebSocket: интерактив в реальном времени 🚀

🔥21 июля в 20:00 мск. приглашаем на открытый вебинар в OTUS, на котором разберем:
- Почему WebSocket — это не просто альтернатива HTTP, а ключевая технология для приложений в реальном времени.
- Как Vue делает интерфейсы реактивными и позволяет обновлять их без перезагрузки.
- Подключение WebSocket к Vue-приложению для отправки и получения сообщений.
- Создание интерфейса чата с автофокусом, прокруткой вниз и другими полезными функциями.
- Погружение в ключевые концепции Vue: ref, watch, v-for, v-model.

Что узнаете:
- Как настроить WebSocket-соединение во Vue.
- Как мгновенно обновлять интерфейс при получении новых данных.
- Как собрать реальный чат за 1 час.

👉 Регистрируйтесь по ссылке: https://vk.cc/cNJ7m3

Бесплатное занятие приурочено к старту курса “Vue.js разработчик”, на котором можно глубже погрузиться в особенности фреймворка, научиться работать с его инструментами и создавать реальные проекты.

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Vue DevTools

Браузерное расширение для отладки приложений Vue.js.

https://github.com/vuejs/devtools

👉 @frontend_1

Response-print-pdf — UI Kit для создания PDF-файлов с использованием React и TypeScript.

Создавайте и генерируйте PDF-документы с помощью React 📄. Этот UI-набор компонентов предназначен для создания PDF и печатных документов, таких как счета, брошюры и другие документы. Используйте простые и многократно используемые компоненты и шаблоны для создания профессиональных документов. Реализуйте свои идеи с помощью любимого фреймворка фронтенда React для создания PDF-документов следующего поколения.

Забудьте о docx, latex или устаревших библиотеках. С помощью react-print-pdf вы получите:

☑️ Простоту в использовании
☑️ Готовые компоненты и шаблоны
☑️ 100% контроль макета
☑️ Интеграция динамических данных в PDF-файл

https://github.com/OnedocLabs/react-print-pdf

👉 @frontend_1

🚀 Реактивное программирование в Angular

Современный Angular предоставляет два подхода к реактивному программированию: RxJS и Signals. На открытом уроке мы разберём оба подхода, покажем, в чём их различия, как они дополняют друг друга, и как выбрать правильный инструмент под задачу.

👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое реактивное программирование в контексте Angular
- Observable и Signals: в чём разница, когда что использовать
- Операторы RxJS
- Создание и управление сигналами (signal, computed, effect)
- Как внедрить сигналы в компоненты, шаблоны и сервисы
- Связь между RxJS и Signals через rxjs-interop
Бесплатный вебинар проходит в рамках курса “Angular Developer“

Регистрация и подробнее о курсе Angular Developer - https://vk.cc/cNKJm1

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Прощай, Zone.js: ускоряем Angular с Signal API и Zoneless-подходом

Привет! Я Незар, фронтенд-разработчик Т-Банка в одном из продуктов Т-Бизнеса. Наша команда использует Angular, и мы следим за всеми изменениями, которые с ним происходят.

В статье разберу, как Angular эволюционировал от Zone.js к Zoneless-приложениям с современным реактивным подходом Signal API и почему это стало ключевым шагом для повышения производительности и упрощения реактивного программирования.

На примерах и замерах производительности посмотрим, как переход к Zoneless-подходу с Signal API позволяет сократить избыточные перерисовки, ускорить отклик приложения и сделать код значительно чище и предсказуемее. Сделаем Angular-приложения быстрее и проще!

https://habr.com/ru/companies/tbank/articles/928206/

👉 @frontend_1

⚡️Хотите научиться писать надежные тесты для React-приложений и улучшить свои навыки в тестировании?

Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.

Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.

👉Регистрация открыта: https://vk.cc/cNMUv5

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🔥 Трюк с style в React, который упростит работу с динамическими стилями

Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:

<div
  style={{
    padding: '16px',
    ...(isError && { border: '1px solid red' }),
    ...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
  }}
>
  Hello!
</div>

📌 Что тут происходит:

* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.

🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).

💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.

👉 @frontend_1

Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯

Современные браузеры уже поддерживают :has() — “родительский селектор”, который раньше приходилось эмулировать на JS.

Пример: показать рамку у карточки, если внутри есть картинка:

.card:has(img) {
  border: 2px solid #4ade80;
}

Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:

.input-wrapper:has(input:focus) label {
  color: #3b82f6;
}

Зачем это нужно?
— Меньше JS → проще поддержка
— Новый уровень гибкости для UI

Документация: MDN про :has()

Пробуйте! Это реально меняет подход к верстке.

👉 @frontend_1

Хотите углубить знания в JavaScript и работать с самыми популярными фреймворками? Прокачайте свои навыки до профессионального уровня с курсом «JavaScript Developer. Professional» от OTUS.

Мы предлагаем практический курс, где вы:
- Изучите передовые технологии, такие как ReactJS, Angular, Vue, Node.js и другие.
- Научитесь работать с такими инструментами, как Webpack, TDD, и PostgreSQL.
- Примените знания на практике: создадите сложные веб-приложения, протестируете их, организуете хранение данных и многое другое.

Вы сможете:
• Создавать приложения для реальных проектов.
• Применять паттерны проектирования.
• Работать с асинхронностью, тестированием, оптимизацией.

Пройдите вступительное тестирование и получите скидку на обучение: https://vk.cc/cNWXTl

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🚀 Быстрое улучшение Lighthouse: content-visibility

Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство:

.card {
  content-visibility: auto;
}

Что делает:

- Браузер не рендерит невидимые элементы (за пределами вьюпорта);
- Сохраняет размер блока для скролла;
- Экономит ресурсы → First Paint быстрее, Lighthouse выше.

Где применять:

- Списки (товары, посты);
- Длинные страницы;
- Виджеты ниже фолда.

⚠️ Осторожно: не ставьте на элементы с динамическим контентом, где важно мгновенное измерение размеров.

Можно добавить contain-intrinsic-size → убрать "скачок" при появлении.

.card {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

2 строки — и сайт ощущается быстрее ✨

👉 @frontend_1

🚀 Подборка Telegram каналов для программистов

Системное администрирование, DevOps 📌

https://t.iss.one/bash_srv Bash Советы
https://t.iss.one/win_sysadmin Системный Администратор Windows
https://t.iss.one/sysadmin_girl Девочка Сисадмин
https://t.iss.one/srv_admin_linux Админские угодья
https://t.iss.one/linux_srv Типичный Сисадмин
https://t.iss.one/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://t.iss.one/linux_odmin Linux: Системный администратор
https://t.iss.one/devops_star DevOps Star (Звезда Девопса)
https://t.iss.one/i_linux Системный администратор
https://t.iss.one/linuxchmod Linux
https://t.iss.one/sys_adminos Системный Администратор
https://t.iss.one/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://t.iss.one/sysadminof Книги для админов, полезные материалы
https://t.iss.one/i_odmin Все для системного администратора
https://t.iss.one/i_odmin_book Библиотека Системного Администратора
https://t.iss.one/i_odmin_chat Чат системных администраторов
https://t.iss.one/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://t.iss.one/sysadminoff Новости Линукс Linux

1C разработка 📌
https://t.iss.one/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://t.iss.one/DevLab1C 1С:Предприятие 8
https://t.iss.one/razrab_1C 1C Разработчик
https://t.iss.one/buh1C_prog 1C Программист | Бухгалтерия и Учёт
https://t.iss.one/rabota1C_rus Вакансии для программистов 1С

Программирование C++📌
https://t.iss.one/cpp_lib Библиотека C/C++ разработчика
https://t.iss.one/cpp_knigi Книги для программистов C/C++
https://t.iss.one/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://t.iss.one/pythonofff Python академия.
https://t.iss.one/BookPython Библиотека Python разработчика
https://t.iss.one/python_real Python подборки на русском и английском
https://t.iss.one/python_360 Книги по Python

Java разработка 📌
https://t.iss.one/BookJava Библиотека Java разработчика
https://t.iss.one/java_360 Книги по Java Rus
https://t.iss.one/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://t.iss.one/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://t.iss.one/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://t.iss.one/developer_mobila Мобильная разработка
https://t.iss.one/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://t.iss.one/frontend_1 Подборки для frontend разработчиков
https://t.iss.one/frontend_sovet Frontend советы, примеры и практика!
https://t.iss.one/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://t.iss.one/game_devv Все о разработке игр

Библиотеки 📌
https://t.iss.one/book_for_dev Книги для программистов Rus
https://t.iss.one/programmist_of Книги по программированию
https://t.iss.one/proglb Библиотека программиста
https://t.iss.one/bfbook Книги для программистов

БигДата, машинное обучение 📌
https://t.iss.one/bigdata_1 Big Data, Machine Learning

Программирование 📌
https://t.iss.one/bookflow Лекции, видеоуроки, доклады с IT конференций
https://t.iss.one/rust_lib Полезный контент по программированию на Rust
https://t.iss.one/golang_lib Библиотека Go (Golang) разработчика
https://t.iss.one/itmozg Программисты, дизайнеры, новости из мира IT
https://t.iss.one/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://t.iss.one/nodejs_lib Подборки по Node js и все что с ним связано
https://t.iss.one/ruby_lib Библиотека Ruby программиста
https://t.iss.one/lifeproger Жизнь программиста. Авторский канал.

QA, тестирование 📌
https://t.iss.one/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://t.iss.one/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://t.iss.one/thehaking Канал о кибербезопасности
https://t.iss.one/xakep_2 Хакер Free

Книги, статьи для дизайнеров 📌
https://t.iss.one/ux_web Статьи, книги для дизайнеров

Математика 📌
https://t.iss.one/Pomatematike Канал по математике
https://t.iss.one/phis_mat Обучающие видео, книги по Физике и Математике
https://t.iss.one/matgeoru Математика | Геометрия | Логика

Excel лайфхак📌
https://t.iss.one/Excel_lifehack

https://t.iss.one/mir_teh Мир технологий (Technology World)

Вакансии 📌
https://t.iss.one/sysadmin_rabota Системный Администратор
https://t.iss.one/progjob Вакансии в IT

Совет по CSS 💡

Используйте табличные цифры для отображения таймеров ✅

https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

👉 @frontend_1

🪄 Трюк: «Скелетон» без JS

При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!

.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  100% {
    background-position: -200% 0;
  }
}

📌 Как использовать:

1. Создаёте div с классом .skeleton вместо контента.
2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.

Плюсы:

- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».

👉 @frontend_1