🔥 useDeferredValue: плавный UX без костылей

При ререндере сложных компонентов (таблиц, графиков, списков) часто случаются лаги при вводе.
useDeferredValue из React решает эту проблему ✨

🧠 Как это работает?
Хук откладывает обновление значения до тех пор, пока браузер не "освободится". Ввод остаётся отзывчивым, а тяжёлые компоненты обновляются асинхронно.

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

const filteredData = useMemo(() => {
  return heavyList.filter(item => item.includes(deferredQuery));
}, [deferredQuery]);

⚠️ Важно: useDeferredValue не откладывает сет стейт — он откладывает только чтение значения внутри зависимостей.

🚀 Идеально для:
– Автокомплитов
– Фильтрации больших списков
– Любых дорогих вычислений при вводе

📚 Подробнее: https://react.dev/reference/react/useDeferredValue

👉 @frontend_1

🧠 useCallback — не всегда оптимизация, иногда вред

Многие считают useCallback must-have для всех функций в компонентах. Но это антипаттерн, если применять его без понимания.

📉 Когда useCallback не нужен:
- Функция не передаётся в пропсы дочерним компонентам;
- Нет реального выигрыша от мемоизации (см. профилировщик);
- Компонент и так редко рендерится.

📌 Плохо:

const MyComponent = () => {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <button onClick={handleClick}>Click</button>;
};

✅ Хорошо:

const MyComponent = () => {
  const handleClick = () => {
    console.log('clicked');
  };

  return <button onClick={handleClick}>Click</button>;
};

🚀 useCallback создаёт объект в памяти и усложняет читаемость. Используй его, только если действительно экономит ресурсы или предотвращает лишние ререндеры.

👉 @frontend_1

Как стать профи в JavaScript? Вебинар для разработчиков, которые хотят расти

JavaScript — это не только язык программирования. Это целый мир, где важно уметь выбирать правильные инструменты и фреймворки, которые действительно помогут вам двигаться вперед.

На открытом вебинаре 21 апреля в 20:00 мск мы разберемся, как стать профессионалом, а не просто джуном. Обсудим:

— Почему одного знания JavaScript недостаточно для роста.
— Как фреймворки (React, Vue, Angular, Svelte) влияют на вашу карьеру и как выбрать тот, который подходит именно вам.
— Почему Node.js полезен фронтенд-разработчикам и как он ускоряет ваш путь в мире технологий.
— Как научиться быстро осваивать новые фреймворки и не бояться перемен.

Этот вебинар — не о коде, а о том, как осознанно развивать свою карьеру. Присоединяйтесь и получите скидку на большое обучение «JavaScript Developer. Professional»:
https://vk.cc/cKV8Hr

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

🔎 Как "убить" ненужный console.log в проде — элегантно

Многие забывают удалять console.log, warn, error перед продом. Это 💩 и баги безопасности, и просто шум. Есть изящное решение — удаление логов на этапе сборки.

Для Vite / Rollup / esbuild / Terser — добавьте:

🔧 Terser (например, в Vite):

// vite.config.ts
terserOptions: {
  compress: {
    drop_console: true,
    drop_debugger: true,
  },
}

⚙️ Esbuild:

esbuild: {
  drop: ['console', 'debugger'],
}

💡 Совет:
Если используете логгер типа logger.info(...), настройте статический анализ через Babel plugin или tree-shaking.

Важно: не отключайте console.error на деве — это может скрыть критичные баги.

🧼 Чистый прод = меньше багов + быстрее загрузка

👉 @frontend_1

🔥 React: useEffect с async-функцией — антипаттерн!

Многие пишут так:

useEffect(() => {
  async function fetchData() {
    const res = await fetch('/api/data')
    const json = await res.json()
    setData(json)
  }

  fetchData()
}, [])

💥 Это работает, но неявно. Возникают проблемы:
- нет отмены запроса при анмаунте;
- сложно обрабатывать race conditions;
- нельзя обрабатывать ошибки на уровне useEffect.

✅ Лучше — использовать AbortController и обычную функцию:

useEffect(() => {
  const controller = new AbortController()

  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err)
    })

  return () => controller.abort()
}, [])

🧠 Профит:
- безопасное отключение;
- контроль ошибок;
- читаемый код.

👉 @frontend_1

🚨 Антипаттерн: усложнённые condition-рендеры

Иногда в JSX попадаются вот такие "шедевры":

{isLoggedIn && user?.settings?.theme === 'dark' && !isLoading && <DarkDashboard />}

🧠 Да, работает. Но читаемость? Поддержка? Страдает.

✅ Лучше так:

const shouldShowDarkDashboard =
  isLoggedIn && user?.settings?.theme === 'dark' && !isLoading;

return (
  <>
    {shouldShowDarkDashboard && <DarkDashboard />}
  </>
);

📌 Плюсы:
- легко отлаживать;
- можно переиспользовать;
- код "говорит", что делает.

🎯 Правило: выноси сложные условия из JSX — это прокачивает читаемость и облегчает поддержку.

👉 @frontend_1

⚡️Vue.js — когда хочется меньше шаблонного кода и больше чистой разработки.

Быстрый, гибкий, понятный. Vue.js остаётся одним из самых удобных фреймворков для фронтенд-разработки — и на этом обучении вы освоите его в полной мере: от компонентной архитектуры и Composition API до юнит-тестов и продвинутой интеграции с GraphQL, Electron, TypeScript.

Вы не просто изучаете синтаксис — вы учитесь строить масштабируемые SPA, настраивать продакшн-сборки и писать код, который реально читается. Программа составлена практиками и обновляется с учётом требований рынка.

👉Набор скоро закроется, пройдите вступительное тестирование и получите скидку на обучение: https://vk.cc/cL3aJ6

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

🔥 Vue: тонкий нюанс с v-if и v-for

Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇

<!-- ⚠️ Антипаттерн -->
<li v-for="item in items" v-if="item.visible">
  {{ item.name }}
</li>

Такой код неэффективен: v-if не влияет на v-for — Vue сначала рендерит все элементы, а потом фильтрует по v-if.

✅ Лучше так:

<li v-for="item in visibleItems">
  {{ item.name }}
</li>

А в computed:

computed: {
  visibleItems() {
    return this.items.filter(item => item.visible);
  }
}

💡 Это улучшит производительность и избавит от неожиданных багов при больших списках.

Подробнее — в оф. доках:
https://vuejs.org/guide/essentials/list.html#v-for-with-v-if

👉 @frontend_1

🔥 useMemo vs. переоптимизация

Многие мидлы бездумно оборачивают всё подряд в useMemo, думая, что так улучшают производительность. На деле — часто наоборот: добавляют лишние вычисления и усложняют отладку.

📌 Когда useMemo реально нужен:
- 🧠 Тяжёлые вычисления (парсинг, сортировка, фильтрация больших массивов);
- 🧱 Объекты/массивы в props, чтобы избежать лишних ререндеров memo-компонентов;
- 🖼️ Стабильность зависимостей в useEffect.

❌ Когда НЕ нужен:
- 💨 Простые вычисления (арифметика, строковые конкатенации);
- 🧹 "на всякий случай" — без профилирования.

📊 Как проверить, помогает ли useMemo?
Открой DevTools → вкладка Profiler → замерь рендер до и после — часто разница нулевая (или хуже).

🛠️ Альтернатива: начни с чистого компонента, профилируй, оптимизируй только узкие места.

👉 @frontend_1

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

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

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

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

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

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

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

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

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

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

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

Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр

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

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

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

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

Шутки программистов 📌
https://yangx.top/itumor Шутки программистов

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

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

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

Excel лайфхак📌
https://yangx.top/Excel_lifehack

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

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

🚀 Как ускорить рендеринг списков в React?

Когда работаешь с большими списками, правильная оптимизация критична. Один из лучших способов — использовать React.memo и мемоизировать элементы списка!

Вот паттерн:

const ListItem = React.memo(({ item }: { item: ItemType }) => {
  return <div>{item.name}</div>;
});

function List({ items }: { items: ItemType[] }) {
  return (
    <div>
      {items.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </div>
  );
}

✅ Что происходит:
- ListItem будет перерисован только если item изменился.
- key помогает React правильно отслеживать изменения.

🔗 Если список ОЧЕНЬ длинный — подключи react-window или react-virtualized для виртуализации. Это даст огромный прирост производительности.


👉 @frontend_1

Совет по CSS 💡

Знаете ли вы, что можно упростить длинные списки селекторов в CSS с помощью :where()? 🤩

👉 @frontend_1

🎯 CSS tip: как избавиться от :last-child и упростить отступы

Когда нужно задать отступ между элементами, но не последнему, часто пишут:

.item:not(:last-child) {
  margin-bottom: 16px;
}

Но есть современный способ без селекторов и костылей 👇

✅ Используй gap с flex или grid:

.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

📌 Преимущества:
– Нет нужды в :last-child
– Чище HTML и CSS
– Работает одинаково в любом направлении (row, column)
– Поддерживается во всех современных браузерах


Итог: если ты всё ещё пишешь :not(:last-child) — пришло время обновить подход.

👉 @frontend_1

🎯 HTML attributes vs DOM properties

Разница между атрибутами и свойствами в HTML/DOM может быть запутанной, особенно когда названия совпадают. Кратко:

* Атрибут — часть HTML.
* Свойство — часть DOM-объекта.

Пример:

<input value="Hello">

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // "Hello"
console.log(input.value);                 // "Hello"
input.value = 'World';
console.log(input.getAttribute('value')); // "Hello"

Значение атрибута остаётся неизменным, даже если свойство обновляется в JS. DOM-свойства могут не синхронизироваться с атрибутами после инициализации.

🔹Свойства могут отличаться от атрибутов

<input disabled>

input.hasAttribute('disabled'); // true
input.disabled;                 // true
input.removeAttribute('disabled');
input.disabled;                 // false

Свойство disabled — булево. Атрибут disabled работает как флаг: его наличие имеет значение, не важно, какое значение вы ему присвоили.

<input disabled="false">

Это всё равно disabled. Так работает HTML.

🔹Когда использовать атрибуты, а когда свойства?

* Используйте атрибуты, когда:

* Вам нужно установить начальное значение в HTML.
* Вы работаете с HTML-строкой.
* Вы хотите сохранить значение при сериализации (например, outerHTML).

* Используйте свойства, когда:

* Вы работаете с DOM в JS.
* Нужно прочитать или изменить текущее состояние элемента.

🔹Иногда стоит быть осторожнее

input.setAttribute('value', 'New');
console.log(input.value); // "New"

Иногда установка атрибута также влияет на свойство, но не всегда — зависит от элемента и конкретного атрибута/свойства.

https://jakearchibald.com/2024/attributes-vs-properties/

👉 @frontend_1

Хотите собрать первое приложение на React за 60 минут?

Присоединяйтесь к открытому уроку от OTUS. Без скучных теорий и банальных todo-листов: только практика, код и живое общение. Вы узнаете, зачем нужны хуки и как компоненты делают интерфейс «живым», и самостоятельно создадите интерактивную игру.

Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.

Встречаемся 7 мая в 20:00 МСК, регистрируйтесь прямо сейчас, чтобы не пропустить: https://vk.cc/cLEyIM

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

CSS совет 💡

Для лучшего UX используйте :focus-visible вместо :focus для изменения стиля обводки ✅

👉 @frontend_1

🧩 Трюк с z-index, о котором часто забывают

Если у вас не работает z-index — причина может быть не в его значении, а в контексте наложения (stacking context).

❗️Вот что его создаёт (неочевидное):

* position: fixed | absolute | relative + z-index ≠ auto
* transform, filter, perspective, opacity < 1
* will-change, mix-blend-mode, contain: layout и другие

📦 Пример:

.parent {
  transform: translateZ(0); /* создаёт stacking context */
  z-index: 10;
}

.child {
  position: absolute;
  z-index: 999; /* но не выйдет за пределы .parent */
}

🧠 Вывод: z-index работает только внутри текущего контекста наложения. Чтобы перекрыть что-то выше — нужно изменить контекст.

📚 Подробнее: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Stacking_context

👉 @frontend_1

🔥 Быстрое сравнение объектов в JS без глубоких сравнений

Иногда не нужен deep equal, а просто надо понять: два объекта точно одинаковы по содержимому?

Вот простой, но мощный трюк на базе JSON.stringify():

const isEqual = (a: object, b: object) =>
  JSON.stringify(a) === JSON.stringify(b);

📌 Подходит для:

* Простых объектов без методов и undefined;
* Сравнения кеша/props в memo;
* Быстрой проверки изменений формы.

⚠️ Не подходит:

* Для вложенных объектов с разным порядком ключей ({a:1,b:2} !== {b:2,a:1});
* Когда есть Date, Map, Set, функции, undefined, symbol.

🧠 Альтернатива:
Если важен порядок и типы — используй lodash.isEqual.

👉 Пример использования:

if (!isEqual(prevForm, currentForm)) {
  saveChanges();
}

⚡ Просто. Эффективно. Для 80% кейсов — 🔥

👉 @frontend_1

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

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

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

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

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

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

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

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

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

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

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

Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр

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

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

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

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

Шутки программистов 📌
https://yangx.top/itumor Шутки программистов

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

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

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

Excel лайфхак📌
https://yangx.top/Excel_lifehack

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

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

🔥 Юзаешь React + TypeScript? Тогда вот тебе трюк на миллион — типизация children правильно!

Часто можно увидеть вот так:

type Props = {
  children: React.ReactNode;
}

Но это слишком широкий тип. Он допускает что угодно: строки, числа, фрагменты, null…

📌 Лучше — использовать ReactElement:

import { ReactElement } from 'react';

type Props = {
  children: ReactElement;
}

👉 Это значит: ожидаем ровно один React-элемент, и никаких строк/чисел/массивов.

Если нужно несколько элементов — используем:

type Props = {
  children: ReactElement | ReactElement[];
}

🎯 Это даёт жёсткую и предсказуемую типизацию, особенно полезно для обёрток и layout-компонентов.

⚠️ А если хочешь прям универсальность — тогда ReactNode ок. Но осознанно.


Пиши типы как профи 💪

👉 @frontend_1