React

⚛️ Реактивность - это просто (и всего 35 строк кода) Мы часто воспринимаем реактивность в современных фреймворках (Vue, Solid, MobX или Preact Signals) как некую "магию". Кажется, что под капотом там сложные механизмы, доступные только избранным архитекторам. Автор блога romgrk решил развеять этот миф и показал, что базовый движок реактивности можно реализовать буквально за 35 строчек кода. В статье «Reactivity is easy» он разбирает ключевые концепции: 🔹 Signals (Сигналы) — контейнеры для значений. 🔹 Effects (Эффекты) — функции, которые реагируют на изменения. 🔹 Dependency Tracking — как именно эффект "узнает", на какие сигналы он подписан (спойлер: через глобальный контекст). Отличный материал для тех, кто хочет перестать бояться "магии" стейт-менеджеров и понять, как всё работает на уровне чистого JS. 👉 Читать статью: https://romgrk.com/posts/reactivity-is-easy #js #frontend #reactivity #architecture ✍️ @React_lib

Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры. Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 80% случаев причина банальна: компоненты перерисовываются без необходимости. Что я проверяю в первую очередь 1️⃣ props меняются по ссылке

<Component data={{ a: 1 }} />

Каждый рендер - новый объект → новый ререндер. Решение: useMemo. 2️⃣ функции создаются заново

onClick={() => doSomething()}

Если компонент обёрнут в memo - он всё равно будет ререндериться. Решение: useCallback. 3️⃣ memo используется «для галочки» React.memo без анализа - зло. Если props всегда новые → memo бесполезен и даже мешает. 4️⃣ state лежит слишком высоко Когда useState в родителе, а нужен только одному дочернему компоненту - привет лишним обновлениям. Мой личный чек-лист 💚 Сначала DevTools → Highlight updates 💚 Потом проверяю ссылки 💚 И только в конце - memo, useMemo, useCallback ⚠️ Важно: оптимизация, это не рефлекс, а осознанный шаг. Сначала простота, потом скорость. ✍️ @React_lib

🔥 Антипаттерн в React: избыточные зависимости useEffect Встречали такое?

useEffect(() => {
  fetchData(id);
}, [id, fetchData]);

❗️Проблема: fetchData — это функция, которая переопределяется при каждом рендере. В итоге эффект срабатывает чаще, чем должен, даже если id не менялся. 👎 Это вызывает лишние запросы, лаги и баги в логике. 💡 Решения: 1. Обёрнуть в useCallback:

const fetchData = useCallback((id: string) => {
  // ...
}, []);

2. Вынести вне компонента (если она не зависит от состояния):

const fetchData = (id: string) => {
  // ...
};

3. Игнорировать в зависимостях (как временный хак, но осторожно!):

// eslint-disable-next-line react-hooks/exhaustive-deps

✅ Правильное управление зависимостями в useEffect — ключ к стабильному и предсказуемому поведению компонентов. ✍️ @React_lib

🚀 Что такое условный рендеринг в React и зачем он нужен? Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.). Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI). - ЕСЛИ пользователь вошел в систему, ТО показать компонент <UserProfile />. - ИНАЧЕ показать компонент <LoginForm />. 💡 Для чего он нужен? Без условного рендеринга все наши приложения были бы статичными. Именно эта концепция делает интерфейс динамическим, "живым" и отзывчивым. Он нужен буквально повсюду. Вот самые частые примеры: - Пока идет загрузка данных с сервера: Мы показываем <Spinner /> (крутилку). Как только данные пришли — показываем <DataList />. - Аутентификация: Показываем "Профиль", если isLoggedIn === true, и "Войти", если isLoggedIn === false. - Обработка ошибок: Если при загрузке произошла ошибка, мы показываем <ErrorMessage /> вместо контента. - Пустые состояния: Показываем "Ваша корзина пуста", если cart.items.length === 0, и список товаров, если в ней что-то есть. - Интерактив: Показ/скрытие модальных окон, выпадающих меню или вкладок по клику. 🛠️ Как это сделать? В React есть несколько популярных способов: 1. Тернарный оператор (? :) - самый частый выбор. {isLoading ? <Spinner /> : <Content />} 2. Логический оператор "И" (&&) - идеален, когда вам нужно что-то показать или не показать ничего (нет ветки "else"). {hasMessages && <NotificationBadge />} 3. Обычный if/else - используется внутри тела компонента, до return, для более сложной логики. Условный рендеринг - это не просто "фича", это сам смысл React. Это то, что позволяет вашему UI реагировать на изменения данных и действия пользователя. #React #JavaScript #Frontend #Development #ConditionalRendering ✍️ @React_lib

Кастомные хуки (Custom Hooks). Создаем свой первый кастомный хук useWindowSize Сегодня напишем простой, но очень полезный хук - useWindowSize. Он будет отслеживать ширину и высоту окна браузера. Это пригодится, если вам нужно менять верстку (например, скрывать сайдбар) при изменении размера экрана. Мы создадим функцию, которая: 1. Использует useState для хранения размеров. 2. Использует useEffect для подписки на событие resize. 3. Важно: Не забываем удалять обработчик событий (cleanup function), чтобы не нагружать память! Вот готовый пример. Можете сохранить его в файл useWindowSize.js.

import { useState, useEffect } from 'react';

// Наш кастомный хук
function useWindowSize() {
  // 1. Инициализируем состояние
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    // Функция для обновления состояния
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    // Устанавливаем размер сразу при загрузке
    handleResize(); 
    
    // 2. Добавляем слушатель события изменения размера окна
    window.addEventListener("resize", handleResize);
    
    // 3. Очистка: удаляем слушатель при размонтировании
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Пустой массив зависимостей = запускаем один раз

  return windowSize;
}

export default useWindowSize;

🚀 Как это использовать в компоненте? Теперь ваш компонент становится чистым и понятным. Никакой лишней логики внутри!

import React from 'react';
import useWindowSize from './useWindowSize';

const App = () => {
  // Просто вызываем наш хук
  const { width, height } = useWindowSize();

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>📏 Размер окна</h1>
      <p>Ширина: <strong>{width}px</strong></p>
      <p>Высота: <strong>{height}px</strong></p>
      
      {width < 600 ? (
        <p>📱 Похоже, вы на мобильном устройстве!</p>
      ) : (
        <p>💻 Это десктопная версия.</p>
      )}
    </div>
  );
};

export default App;

✍️ @React_lib

📕Создание приложения Movie Watchlist Manager на Angular: от компонентов до управления состоянием - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 19 ноября в 20:00 мск мы погрузимся в созданию приложения по отслеживанию просмотренных фильмов/сериалов с использованием сигнальных сторов в Angular: 📗 На вебинаре разберем: 1. Создание компонентов и подключение API для поиска и добавления фильмов. 2. Организация архитектуры проекта и лучшие практики. 📘 В результате на практике изучите и освоите базовые концепции Angular (компоненты, сервисы, DI), работу с формами, API и реактивными потоками, использование store для управления состоянием приложения и лучшие методы построения современного SPA-приложения на Angular. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRpDLh Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью мемоизации списков Каждый из нас рендерит списки: товары, заявки, комментарии, юзеров - список бесконечен. И одна из самых частых проблем: каждый элемент списка перерендеривается даже при минимальном изменении родителя. Сегодня разбираем реальный кейс и решение, которое спасает производительность. 🔥 Проблема У нас есть список задач, и при обновлении одной задачи - перерендериваются все элементы списка. Визуально это незаметно, но при больших списках производительность падает. Причина проста: у каждого элемента меняется ссылка на props → компонент считается обновлённым → React перерендеривает его. 💡 Решение: React.memo + useCallback Вот минимальный рабочий пример. Компонент элемента списка

const TaskItem = React.memo(function TaskItem({ task, onToggle }) {
  console.log("Render:", task.title);
  return (
    <div>
      <input
        type="checkbox"
        checked={task.done}
        onChange={() => onToggle(task.id)}
      />
      {task.title}
    </div>
  );
});

Родитель

function TaskList() {
  const [tasks, setTasks] = useState(data);

  const toggle = useCallback(id => {
    setTasks(prev =>
      prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))
    );
  }, []);

  return tasks.map(task => (
    <TaskItem key={task.id} task={task} onToggle={toggle} />
  ));
}

🚀 Что это даёт? - React.memo не даст компоненту перерендериться без изменения реальных данных. - useCallback создаёт стабильную ссылку на функцию. - Итог: перерендерятся только изменённые элементы, остальное остаётся нетронутым. При 500+ элементах разница ощущается моментально. ✍️ @React_lib

Headless Component: паттерн для создания пользовательских интерфейсов React По мере того как элементы управления React UI становятся все более сложными, сложная логика может переплетаться с визуальным представлением. Это затрудняет рассуждения о поведении компонента, затрудняет его тестирование и приводит к необходимости создавать похожие компоненты, которым нужен другой внешний вид. Headless Component извлекает всю невизуальную логику и управление состоянием, отделяя мозг компонента от его внешнего вида. https://martinfowler.com/articles/headless-component.html ✍️ @React_lib

🛠Разбор внутренних механизмов React: как работает обновление UI и почему некоторые компоненты перерисовываются, а другие нет? Открытый вебинар от эксперта OTUS проходит на основе курса «React.js Developer», который стартует совсем скоро! 🗓 18 ноября, 20:00 — «Уровень PRO: движок React. Fiber, Reconciliation и искусство осознанной оптимизации» - Под капотом React: Virtual DOM и Fiber Architecture - Принцип обновления интерфейса и Reconciliation - Практические советы по производительности и мемоизации ⚡️ Прокачайте навыки React на бесплатном вебинаре. Региструйтесь по ссылке: https://vk.cc/cRnaBO Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI. Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться». 🔥 Проблема Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:

const handleSelect = id => {
  setSelected(id);
};

Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер. ✅ Решение Используйте useCallback:

const handleSelect = useCallback((id) => {
  setSelected(id);
}, []);

Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций. Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода. 🎯 Практическое правило, которое я использую

Мемоизируйте только то, что реально ререндерится слишком часто. Слепая мемоизация = грязный код.

✍️ @React_lib

📕От нуля до пиццы за 60 минут: Angular Reactive Forms в бою - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 13 ноября в 20:00 мск мы погрузимся в создание интерактивного конструктора пиццы с использованием Angular Reactive Forms и сигналов. 📗 На вебинаре: 1. Понимание архитектуры компонентов и Template syntax: директивы, биндинги, pipes 2. Погружение в Event handling и реактивность 📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRfr0P Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Почему useEffect - это не костыль, а инструмент, и как им не надо пользоваться 😅 Очень часто вижу в коде:

useEffect(() => {
  fetchData();
}, []);

и всё вроде бы ок… пока не появляется зависимость, вроде userId, и кто-то лениво добавляет её в массив зависимостей, не понимая, что произойдёт при каждом изменении. 👉 Проблема не в useEffect - а в том, что мы не до конца понимаем его модель. useEffect = реакция на изменение состояния. Если у тебя эффект, который не зависит от UI - например, загрузка данных - вынеси его в кастомный хук или вообще за пределы компонента. Например:

function useUser(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let ignore = false;
    async function load() {
      const data = await fetch(`/api/user/${userId}`).then(r => r.json());
      if (!ignore) setUser(data);
    }
    load();
    return () => (ignore = true);
  }, [userId]);

  return user;
}

Теперь у тебя эффект чистый, изолированный и переиспользуемый. Компонент не знает ничего про загрузку - он просто получает user. 💡 Маленький лайфхак: если ты пишешь эффект и не можешь объяснить словами, почему он зависит от этих переменных - скорее всего, архитектура требует пересмотра, а не новый костыль в useEffect. ✍️ @React_lib

📕Angular UI-Kit с нуля: Как построить библиотеку переиспользуемых компонентов - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue) На открытом уроке 29 октября в 20:00 мск мы разберёмся в применении Angular Reactive Forms и сигналов: 📗 На вебинаре: 1. Template syntax: директивы, биндинги, pipes. 2. Event handling и реактивность. 📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок. 👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cQL6nz Все участники открытого урока получат скидку на курс "Angular Developer" Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI. Trigger → Render → Commit ✍️ @React_lib

🚀 Оптимизация React-приложения: 5 техник, которые работают Сегодня расскажу вам, как можно ускорить работу React-приложения, если оно начинает тормозить. 1️⃣ Используйте React.memo Если ваш компонент ререндерится без причины, оберните его в React.memo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.

const OptimizedComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

2️⃣ Оптимизируйте контекст с useMemo и useCallback Частая ошибка — передача в useContext сложных объектов без мемоизации. Используйте useMemo и useCallback для оптимизации.

const value = useMemo(() => ({ user, logout }), [user]);  

3️⃣ Разбейте состояние на атомарные части Часто программисты хранят весь стейт в одном useState, но лучше разбить его на части. Так обновление одной переменной не будет вызывать ререндер всего компонента.

const [name, setName] = useState("");  
const [age, setAge] = useState(0);

4️⃣ Динамическая подгрузка компонентов (Code Splitting) Если у вас большое приложение, используйте React.lazy для загрузки компонентов по требованию.

const LazyComponent = React.lazy(() => import("./BigComponent"));

5️⃣ Используйте производительные списки Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например, react-window или react-virtualized.

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

✍️ @React_lib

🚀 Хотите создавать современные и отзывчивые веб-приложения на самом популярном JS-фреймворке? Начните с бесплатного вебинара и прокачайте навыки React прямо «здесь и сейчас»! 🗓 28 октября, 20:00 — «Галерея с API и тёмной темой — React зажигает UX» Что узнают участники: - Связь React с реальным API и динамическая загрузка данных - Работа с событиями и хуками для интерактивного интерфейса - Lazy loading и его влияние на UX - Как собрать полноценное приложение всего за 1,5 часа 🎯 Для фронтенд-разработчиков и начинающих React-разработчиков, которые хотят оживить интерфейсы и собрать мини-проект для портфолио. 💻 Курс «React.js Developer» - следующий шаг после вебинара: - Освоите Redux, Redux-Saga, Redux-thunk - Будете создавать SPA и оптимизировать под production - Изучите TypeScript и пишете чистый код - Работаете с GraphQL, Apollo, Relay - Разбираетесь с Webpack, Babel и паттернами функционального программирования ⚡️ Не упустите шанс - вебинар бесплатный, а курс поможет выйти на уровень middle+ и собирать проекты с реальными API! Регистрируйтесь на вебинар: https://vk.cc/cQnPZ7 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вместо этого используйте перечисления (enums). ✍️ @React_lib

Custom Hooks Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна, дебаунс запросов. И вот тут кастомные хуки реально спасают. Например, простой хук для работы с localStorage 👇

import { useState } from "react";

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

  const setStoredValue = (newValue: T) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue] as const;
}

export default useLocalStorage;

Теперь можно использовать так:

const [theme, setTheme] = useLocalStorage("theme", "light");

🔥 Плюсы: - код становится чище и переиспользуемым; - избавляемся от дублирования логики; - легко тестировать и поддерживать. Я заметил, что когда начинаешь собирать библиотеку своих хуков, разработка ускоряется в разы. Советую прямо сегодня завести папку hooks и складывать туда такие полезности. ✍️ @React_lib

Как frontend-разработчику получить оффер в Bigtech? Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные. Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

На своем канале: 👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях 👉даю примеры по прохождению собеседований 👉разбираю резюме и докручиваю резюме подписчиков 👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас 🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки. Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks Реклама, erid : 2W5zFGwJB1r ИП Галактионов Тихон Витальевич, ИНН 771618975809

React Developer Learning Roadmap |-- Core Web Fundamentals | |-- HTML & Semantic Elements | |-- CSS Basics: Selectors, Properties | |-- Box Model: Margin, Padding, Border | |-- Layout Systems: Flexbox, CSS Grid | |-- Responsive Design & Media Queries | |-- CSS Preprocessors (SASS, LESS) | |-- CSS Architecture Patterns (BEM, SMACSS) |-- JavaScript Deep Dive | |-- Syntax, Variables & Data Types | |-- Operators & Expressions | |-- Control Flow (if-else, switch) | |-- Loops (for, while, do-while) | |-- Functions, Arrow Functions | |-- Scope, Closures & Hoisting | |-- Error Handling & Debugging |-- DOM & Browser APIs | |-- Element Selection & Manipulation | |-- Event Handling | |-- Working with Forms & Validations | |-- Fetch API / AJAX | |-- Web Storage (localStorage, sessionStorage) |-- Modern JavaScript & Tooling | |-- ES6+ Features: let/const, spread/rest, destructuring, modules | |-- Transpiling (Babel) | |-- Bundlers: Webpack, Rollup, Parcel | |-- Module Systems: ES Modules, CommonJS |-- Version Control & Workflow | |-- Git Fundamentals: commit, branch, merge | |-- Hosting: GitHub, GitLab, Bitbucket | |-- Pull Requests & Code Reviews | |-- Continuous Integration Basics |-- React & Ecosystem | |-- React Fundamentals: JSX, Components, Props | |-- State & Lifecycle Methods | |-- Hooks (useState, useEffect, useContext, etc.) | |-- Component Architecture & Composition | |-- Routing (React Router) | |-- State Management (Context API, Redux, Zustand, Recoil) | |-- React Performance (memo, useCallback, useMemo) |-- Styling in React | |-- CSS-in-JS (Styled-Components, Emotion) | |-- CSS Modules | |-- Utility-first Frameworks (Tailwind) | |-- UI Component Libraries (Material-UI, Ant Design) | |-- Theming & Design Tokens | |-- Accessibility (a11y) & ARIA | |-- Cross-Browser Compatibility |-- Testing in React | |-- Unit Testing (Jest, React Testing Library) | |-- Component Testing & Snapshot Testing | |-- Integration Testing | |-- End-to-End Testing (Cypress, Playwright) | |-- Linting & Formatting (ESLint, Prettier) |-- Performance & Optimization | |-- Code Splitting & Lazy Loading (React.lazy, Suspense) | |-- Memoization & Avoiding Re-renders | |-- Image Optimization & Lazy Loading | |-- Tree Shaking & Minification | |-- Critical Rendering Path & Web Vitals | |-- Server-Side Rendering & Hydration |-- Build, Deployment & Server-side Tools | |-- Package Managers: npm, yarn, pnpm | |-- Build Scripts & Tooling | |-- Frameworks / SSR: Next.js, Remix | |-- Static Site Generation (SSG) & Incremental Static Regeneration | |-- Deployment Platforms: Vercel, Netlify, AWS, DigitalOcean | |-- CI/CD for React Apps |-- Projects & Portfolio for React | |-- Small React Apps & Widgets (e.g. Modal, To-Do List) | |-- Real-world Projects (Dashboard, E-Commerce, Social App) | |-- Fullstack Projects (React + backend) | |-- Open Source Contributions & Collaborations |-- Continuous Learning & Growth | |-- Blogs, Tutorials & Courses | |-- React & JavaScript Conference Talks | |-- Community & Developer Forums | |-- Reading Documentation & RFCs | |-- Tracking the React Ecosystem & Trends ✍️ @React_lib