✍️ @React_lib

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

Как frontend-разработчику получить оффер в Bigtech?

Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные.

Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые?

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

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

На своем канале:
👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях
👉даю примеры по прохождению собеседований
👉разбираю резюме и докручиваю резюме подписчиков
👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас

🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.

Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks

Реклама, erid : 2W5zFGwJB1r ИП Галактионов Тихон Витальевич, ИНН 771618975809

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

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.

✅ Вместо этого используйте перечисления (enums).

✍️ @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

⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React

Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI.

Trigger → Render → Commit

✍️ @React_lib

Почему 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

🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах

Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI.
Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».

🔥 Проблема

Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:

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

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

✅ Решение

Используйте useCallback:

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

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

🎯 Практическое правило, которое я использую

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

✍️ @React_lib

Headless Component: паттерн для создания пользовательских интерфейсов React

По мере того как элементы управления React UI становятся все более сложными, сложная логика может переплетаться с визуальным представлением. Это затрудняет рассуждения о поведении компонента, затрудняет его тестирование и приводит к необходимости создавать похожие компоненты, которым нужен другой внешний вид. Headless Component извлекает всю невизуальную логику и управление состоянием, отделяя мозг компонента от его внешнего вида.

https://martinfowler.com/articles/headless-component.html

✍️ @React_lib

🎯 Сегодня покажу вам простой, но мощный приём: как ускорить 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

Кастомные хуки (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

🚀 Что такое условный рендеринг в 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

🔥 Антипаттерн в 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

⚛️ Реактивность - это просто (и всего 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

Как перестать страдать с зависимостями в useEffect

Сегодня покажу приём, который резко снижает боль от “почему эффект снова сработал” и “ESLint ругается на deps”.

Типичный кейс: в useEffect ты подписываешься на что-то и используешь колбэк/данные, которые постоянно меняются → эффект перезапускается, подписки пересоздаются.

Решение: “стабильный эффект + актуальные данные через ref”

Идея простая:

🔹эффект запускается редко (или 1 раз),
🔹а внутри всегда используются самые свежие значения через ref.

Пример (мини-хук):

function useLatest(value) {
  const ref = React.useRef(value);
  React.useEffect(() => { ref.current = value; }, [value]);
  return ref;
}

Использование:

const onMessageLatest = useLatest(onMessage);

React.useEffect(() => {
  const unsub = socket.subscribe((msg) => {
    onMessageLatest.current(msg);
  });
  return unsub;
}, []); // подписка не пересоздаётся

Что это даёт:

🔹подписки/таймеры/листенеры не пересоздаются на каждую мелочь,
🔹зависимости в эффекте становятся честными,
🔹меньше неожиданных “петель”.

✍️ @React_lib

Как frontend-разработчику получить оффер в Big Tech?

Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.

Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...

Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.

Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Разбираю самые популярные и каверзные вопросы на собесах
👉Рассказываю как пройти фильтр HR
👉Борюсь с убеждениями, которые мешают развиваться
👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

Регулярно публикую полезные материалы:

▪️60 вопросов, которые точно помогут тебе на собеседовании.
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
▪️Чек лист проверки своего резюме

Подписывайся, нас уже 4500 🤓: ссылка

Реклама, erid 2W5zFK9zMoW: ИП Галактионов Тихон Витальевич, ИНН 771618975809

useMemo и useCallback - когда они реально помогают, а когда вредят

Сегодня разберём больную тему: “обмазался мемоизацией - стало хуже”.

Когда useMemo/useCallback НЕ нужны

🔹Значение/функция не передаются в memo - компоненты и не используются как deps.
🔹Вычисление дешёвое (например, arr.map на 20 элементов).
🔹Ты добавил их “на всякий случай”.

Побочный эффект: ты усложняешь код и добавляешь лишнюю работу React (хранить кеш, сравнивать deps).

Когда они реально спасают

1. Стабильные пропсы для React.memo

const onSelect = React.useCallback((id) => {
  setSelected(id);
}, []);

2. Тяжёлые вычисления

const filtered = React.useMemo(() => heavyFilter(items, query), [items, query]);

3. Объекты в deps (чтобы не триггерить эффекты/хуки)

const params = React.useMemo(() => ({ q: query, page }), [query, page]);

Быстрый чек-лист перед добавлением мемоизации

🔹Это реально горячая точка? (профайлер/замеры)
🔹Без мемоизации есть лишние рендеры дочерних memo?
🔹Или это просто “красивее выглядит”?

✍️ @React_lib

❌ Избегайте «прокидывания» пропсов (prop-drilling) для расширения компонентов

✅ Вместо этого используйте композицию

✍️ @React_lib

Почему React-приложение “лагает” при вводе в инпут - и как починить за 3 минуты

Сегодня покажу классическую ситуацию: у тебя есть форма/поиск, ты печатаешь и интерфейс начинает подтормаживать. Чаще всего причина одна: на каждый onChange ты триггеришь тяжёлый ререндер (фильтрация, сортировка, построение списков, пересчёт графиков, сложные компоненты).

Быстрая диагностика

1. Открой React DevTools → Profiler
2. Запиши ввод в поле
3. Посмотри, кто ререндерится и сколько времени занимает

Три быстрых фикса (по популярности)

1) useDeferredValue для “тяжёлого” поиска

• Инпут обновляется мгновенно
• Тяжёлая часть догоняет “в фоне”

Идея: рендер списка завязываем не на query, а на deferredQuery.

2) useMemo для вычислений
Если делаешь filter/sort/map по большому массиву - мемоизируй результат по зависимостям.

3) Разделяй состояние
Частая ошибка: держать “всё” в одном компоненте.
Инпут сверху - список снизу. Если список тяжёлый, вынеси его в отдельный компонент + memo.

Мини-чеклист

• Есть ли тяжёлые вычисления в рендере?
• Ререндерится ли список при каждом вводе?
• Можно ли “отложить” вычисление (deferred)?
• Можно ли кешировать (memo)?
• Можно ли изолировать компонент?

✍️ @React_lib