👩‍💻 Подключение компонента с помощью connect

Хотя хуки являются современным способом работы с Redux, вы также можете использовать метод connect из библиотеки react-redux для подключения компонентов к Redux. Это более старый способ, но он по-прежнему широко используется и имеет свои преимущества.

// Компонент
const TodoList = ({ todos, addTodo, removeTodo }) => {
    // some logic
    return ();
};

// Определяем, какие данные из Redux store передать компоненту
const mapStateToProps = (state) => ({
    todos: state.todos.todos,
});

// Определяем, какие действия передать компоненту
const mapDispatchToProps = {
    addTodo,
    removeTodo,
};

// Подключаем компонент к Redux
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Делаю сейчас курс по Redux + Redux Toolkit + RTK Query и вспомнил, как раньше подключались компоненты. Блин, выглядит круто. Может снова так делать.😅

Кто помнит? Олды есть?

#redux #react

👩‍💻 Принципы Redux

Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.

🔒 Единое хранилище (Single Source of Truth)

В Redux есть только одно общее хранилище, которое содержит все состояние приложения. Это облегчает управление состоянием и делает его предсказуемым.

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

const initialState = {
    todos: [],
    user: null,
};

// Всё состояние хранится в одном объекте
const state = {
    todos: ['Задача 1', 'Задача 2'],
    user: { name: 'Иван', age: 30 },
};

👀 Состояние только для чтения (Read-Only State)

Единственным способом изменения состояния является отправка действия (action). Это гарантирует, что изменения состояния происходят только через определенные точки (actions), что делает их предсказуемыми.

Когда состояние приложения меняется, это происходит только через отправку действий. Это делает все изменения явными и отслеживаемыми.

// Действие для добавления задачи
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text,
});

// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));

✨ Чистые функции редюсеры (Pure Functions)

Редюсеры должны быть чистыми функциями. Это значит, что для одинаковых входных данных они всегда должны возвращать одинаковый результат, и они не должны изменять свои входные данные.

Чистые функции делают состояние предсказуемым и упрощают отладку. Они не имеют побочных эффектов и не влияют на внешние состояния.

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        default:
            return state; // Возвращаем новое состояние, не изменяя текущее
    }
};

⬇️ Однонаправленный поток данных (Unidirectional Data Flow)

Поток данных в Redux всегда односторонний. Это означает, что данные передаются от состояния к представлению, и изменения состояния происходят только через действия.

Однонаправленный поток данных упрощает понимание, как данные перемещаются в приложении. Он делает отладку проще, поскольку вы всегда знаете, откуда приходят данные и как они изменяются.

// Пример потока данных
const mapStateToProps = (state) => ({
    todos: state.todos,
});

// Компонент получает данные
const TodoList = ({ todos }) => (
    <ul>
        {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
        ))}
    </ul>
);

// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);

#redux #frontend #react #flux

🔼 Почему важно использовать lazy-loading

Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.

⚠️ Проблема

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

✔️ Решение

Lazy-loading изображений
Современный HTML позволяет указать атрибут loading="lazy":

<img src="example.jpg" alt="Описание" loading="lazy" />

Это простой и поддерживаемый способ ленивой загрузки.

Lazy-loading компонентов в React
В React можно использовать React.lazy и Suspense:

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<div>Загрузка...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

Компонент HeavyComponent загрузится только тогда, когда он понадобится.

💎 Преимущества
- Ускоряет загрузку страницы.
- Снижает объем передаваемых данных.
- Улучшает производительность и SEO.

Используйте lazy-loading, чтобы сделать ваши проекты быстрее и удобнее для пользователей.

#lazy #react #optimization

👩‍💻 5 продвинутых паттернов в React

Каждый разработчик хочет писать универсальный, чистый код, который не будет повторяться, будет оптимизированным и легкомасштабируемым. В этом видео мы разберем 5 продвинутых паттернов и подходов в React

- Slot Pattern (Component Injection)
- Render Prop
- Proxy Component
- Function as a Child
- Compound Components

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #react #patterns

👩‍💻 Принципы SOLID в React

Принципы SOLID помогают строить приложения, которые проще развивать и поддерживать в долгосрочной перспективе. Они помогают выстроить архитектуру с учетом будущих расширений и изменений. Изучив эти принципы, вы научитесь думать на шаг вперед, проектируя гибкие и масштабируемые системы.

- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 Репозиторий

#react #solid #frontend

👩‍💻 Принципы ООП в React.

В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракцию — и покажем, как они работают в React. Узнаем, что такое Render Props, Component Injection, композиция и декомпозиция, и применим их в функциональных компонентах, Custom Hooks и HOCs.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 Репозиторий

#frontend #react #ооп

👩‍💻 Продвинутый React

Выпущено три видео по паттернам и принципам программирования:

📹 5 продвинутых паттернов в React – изучаем ключевые подходы и паттерны в разработке React-приложений: Render Props, Slot Pattern (Component Injection), Proxy Component, Function as a Child, Compound Components.

📹 Принципы SOLID в React – учимся создавать переиспользуемые компоненты, используя SOLID-принципы. Разбираем, как правильно декомпозировать код и проектировать архитектуру с учетом лучших практик.

📹 Принципы ООП в React – закрепляем понимание объектно-ориентированного программирования, разбираем, откуда берутся паттерны и подходы, и как они помогают в разработке.

💡 Для чего это нужно?

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

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

#frontend #react #solid #oop

👨‍💻 План развития Frontend Разработчика (Часть 3)

Ты уже освоил базу: HTML, CSS, JavaScript. Но в реальности никто не пишет проекты на чистом коде — это долго, сложно и неэффективно. Если ты написал что-то на чистом JS без фреймворков, то, грубо говоря, ты создал свой фреймворк. Другим разработчикам будет тяжело разобраться в твоём коде, а поддержка такого проекта превратится в ад.

Решение? Готовые фреймворки и библиотеки. Они дают структуру, правила и экосистему, упрощают разработку и делают код предсказуемым.

Среди популярных вариантов — Vue, Angular, Svelte, Solid, но мы остановимся на React. Почему? Потому что он мощный, гибкий и востребованный на рынке. Давай разберёмся, как его правильно учить.

👩‍💻 React + Router (< 2 месяцев)

React — это основной инструмент, с которым ты будешь работать. Если ты можешь сделать ToDo App, то это уже похоже на коммерческий код. Чем рабочий код отличается от пет-проектов? Объёмом, структурой, абстракциями, обёртками, разделением на модули.

Когда ты делаешь простое приложение (например, Кинотеатр), ты уже сталкиваешься с реальными кейсами:
- Работа с API
- Отрисовка данных
- Поиск и фильтрация
- Роутинг
- Управление состоянием

Сложность не в написании какого-то "особенного" кода, а в масштабе. Нужно учиться ориентироваться в больших проектах, понимать чужой код и писать поддерживаемый свой.

Для изучения React я предлагаю максимально подготовить свой мозг и пройти 2 курса по React, повторяя за автором и делая конспект:

→ React - Курс по React для Начинающих
https://www.youtube.com/watch?v=is3T0W0ouT0

→ Курс React с нуля
https://youtu.be/am_UiIvha5M?si=7io3qRZITckfH2zA

Далее проходим более подробный курс с дотошным объяснением базы от Димыча:

→ Todolist React JS
https://www.youtube.com/watch?v=pzs3a-d3kjM

После этого приступаем к практике и делаем приложение новостей с основными фичами фронтенда: Поиск, Фильтрация, Пагинация, Слайдер и т.д. Тут также произойдёт первое знакомство с TypeScript, Redux, Router, FSD:

→ React Новости
https://youtu.be/bD0UXb7kD_k?si=e5Y5Jkiwt_66U5Ug

Далее углубляем свои знания и смотрим, как создают большое приложение Pizza:

→ React Pizza v2
https://youtu.be/_UywBskWJ7Q?si=WN2kX8Eck9BW_OD3

Ещё больше практики, чтобы уже тошнило, а мозг окончательно привык к React:

→ Разработай 6 проектов на ReactJS
https://youtu.be/eS0GL73tkmw?si=2G36Y4n-bYI4hnT1

Изучаем базу роутинга и применяем сразу на практике

→ React Router 6
https://youtu.be/0auS9DNTmzE?si=GGuidPN1NpfvVAiw

🖥 TypeScript (≤10 дней)

На самом деле ТС очень сложный. Даже опытные разработчики не умеют решать сложные задачи. Проходим 2 курса в YouTube:

→ Полный курс TypeScript
https://www.youtube.com/watch?v=V7hBejCH1HI

→ TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС
https://youtu.be/LWtHl__oEWc?si=E3MJHqHHMM68NblJ

Если за 10 дней не освоили базис — всё равно идём дальше. Остальное натренируется в проектах. Сложные темы: дженерики, утилити-типы, защитники типов, маппинг — вы не поймёте их, пока не начнёте практиковаться в полном стеке. Нам нужна база, которая покрывает 80% рабочей нагрузки.

👩‍💻 Redux + RTK (3-4 недели)

Тут так же как и в TypeScript. Redux имеет кучу инструментов. Но для того чтобы нам понять его - нужна практика. У многи новичков проблема с ним. Что нам нужно уметь: создавать слайсы, использовать данные в компонентах, использовать диспатч, делать запросы на сервер с санками или rtk query. Это база, которая уже позволит вам делать приложение. остальное изучаем уже на практике всего стека.

→ Полный курс Redux
https://www.youtube.com/watch?v=gPmYTqGPDWA

→ Redux Toolkit для управления
https://www.youtube.com/watch?v=C0fBnil_Im4

То же самое и с Redux. Хотя в нём много инструментов, главное — начать практиковаться. У многих новичков возникают сложности. Базовые навыки, которые нужно освоить: Создание слайсов, Использование данных в компонентах, Работа с диспатчем, Запросы к серверу (санки или RTK Query)

Этого достаточно для создания рабочих приложений. Остальное освоится в процессе работы с полным стеком.

#redux #roadmap #frontend #react #typescript

👨‍💻 План развития Frontend Разработчика (Часть 4)

Когда мы изучили полный стек: React, Router, Redux, TypeScript - начинаем очень много практиковаться. Набивать руку и развивать мышление.

Можно смотреть, как делают большие приложения (рекомендуется смотреть в Яндекс.Браузере с переводом):

https://youtu.be/0mdjgQdQF1k
https://youtu.be/fq7k_gVV5x8
https://youtu.be/xZ1ba-RLrjo
https://youtu.be/-7K_0NRLCu4
https://youtu.be/JKuofETX0GM

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

Как выбрать проект:
- Не берите готовые идеи из YouTube
- Не копипастите код без понимания
- Делайте всё самостоятельно

Примеры идей:
- Приложение магазин с товарами
- Аналитика футбола с API футболистов
- Приложение с картой для просмотра самолётов

Где брать ресурсы:
- Публичные API (найдите в браузере: "публичное API самолётов/футболистов" и т.д.)
- Бесплатные дизайны в Figma (или создайте простой прототип)

Главное, чтобы вам было интересно и был азарт!

Это репозиторий YeaHub. Здесь используется куча инструментов, много страниц — всё грамотно настроено. Мои ученики тут проходят финальную практику перед выходом на рынок. Это даёт мощный буст: их обучение чётко делится на "до" и "после".

Репа специально открыта — любой новичок может заглянуть в большой продакшн-проект. Когда я сам учился, мне очень не хватало такого примера.

https://github.com/YeaHubTeam/yeahub-platform

После того, как вы уже можете разрабатывать приложения в полном стеке, можно углублять знания

→ Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy
https://www.youtube.com/watch?v=GJe0-oPbiqw

→ Деплой Frontend приложения.
https://youtu.be/8OHe6chCWTE?si=JQpY1Bki7Cj6GiZC

→ Feature-Sliced Design
https://www.youtube.com/watch?v=O4SDx-aZY5U

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

📹 5 продвинутых паттернов в React – изучаем ключевые подходы

📹 Принципы SOLID в React – учимся создавать переиспользуемые компоненты, используя SOLID-принципы

📹 Принципы ООП в React – закрепляем понимание объектно-ориентированного программирования

С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере 🚀 YeaHub.

#курс #frontend #react

👩‍💻 React Fiber

React Fiber — это новый алгоритм согласования (reconciliation), представленный в React 16. Он заменил старый механизм обновления Virtual DOM

🗓 Что было до Fiber?

До React 16 использовался стековый алгоритм рендеринга. Его ограничения:

→ Синхронный рендеринг – React выполнял обновление за один проход, блокируя основной поток. Если дерево компонентов было большим, это вызывало лаги.

→ Невозможность приоритизации – Все обновления обрабатывались в порядке очереди, даже если некоторые (например, анимации или пользовательский ввод) требовали более быстрой реакции.

→ Отсутствие прерываний – Процесс нельзя было разбить на части или отложить, что усложняло реализацию плавного интерфейса.

🔼 Почему Fiber — это улучшение?

Fiber решает эти проблемы, вводя:

→ Инкрементальный рендеринг – Работа разбивается на небольшие части, которые выполняются в несколько кадров, избегая блокировки потока.

→ Приоритезацию задач – Критичные обновления (например, клики) обрабатываются раньше фоновых (рендер тяжёлых списков).

→ Возможность паузы и возобновления – React может прервать рендеринг для выполнения более важной задачи, а затем продолжить.

→ Поддержку рендеринга вне основного потока – Это основа для Concurrent React, позволяющего выполнять вычисления параллельно.

Fiber не изменил принцип работы Virtual DOM, но сделал его обновление более умным и адаптивным.

#react #fiber

🧠 Оптимизация памяти во фронтенде

Когда говорят про оптимизацию фронтенда, чаще всего думают о скорости загрузки или анимациях. Но есть ещё одна важная область — память.

- утечки замедляют приложение со временем
- на мобильных устройствах это может приводить к крашам
- стабильность UX напрямую зависит от того, как мы управляем памятью

Теперь давайте поговорим об основных источниках проблем

1️⃣Замыкания и долгоживущие ссылки

Частая ошибка — сохранять в замыкании большие объекты или DOM-элементы, которые уже не нужны. В итоге GC (сборщик мусора) не может их очистить.

Решение: не тащить в замыкания лишнее, по возможности использовать WeakMap/WeakSet для хранения.

2️⃣Неудалённые обработчики событий

Навесили addEventListener, но забыли removeEventListener. Опасно при работе с компонентами: удалённый компонент может остаться в памяти из-за висящего обработчика.

Решение: всегда отписываемся.

useEffect(() => {
  const handler = () => console.log("scroll");
  window.addEventListener("scroll", handler);

  return () => {
    window.removeEventListener("scroll", handler);
  };
}, []);

3️⃣Таймеры и интервалы

Забытые setInterval или setTimeout продолжают жить, даже если компонент уже размонтирован.

Решение: чистим вручную.

const id = setInterval(() => doWork(), 1000);
// позже
clearInterval(id);

4️⃣Кэширование «без меры»

Иногда мы храним результаты в памяти (memoization, cache, global store), но не думаем про «старые» данные. В итоге кэш растёт бесконечно. Избыточное кэширование и мемоизация тоже могут быть вредны: на лёгких операциях выгоднее пересчитать заново, чем хранить всё в памяти.

Решение: использовать LRU cache или ограничивать размер хранения.

5️⃣Глобальные ссылки и синглтоны

Всё, что записано в глобальную область (window, global store), живёт всё время жизни приложения. Если туда положить тяжёлый объект, GC его никогда не удалит.

Решение: хранить только действительно нужное, очищать ссылки вручную, если объект больше не нужен.

6️⃣DOM-ссылки и оторванные узлы

Если держать ссылку на DOM-элемент, удалённый из документа, он остаётся в памяти. Особенно актуально при ручной работе с document.createElement.

Решение: обнулять ссылки после удаления узлов.

#оптимизации #react #frontend #память

🖥 Замыкания и долгоживущие ссылки: как избежать утечек памяти

Замыкания в JavaScript позволяют функциям «запоминать» переменные внешнего окружения. Но если в замыкании остаются большие объекты или DOM-элементы, сборщик мусора их не очистит — это приводит к утечкам памяти.

🔹 Проблема: долгоживущие ссылки

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

function createCache() {
    const cache = { largeData: new Array(1000000).fill('*') };

    return function getCache() {
        return cache;
    };
}

const getCache = createCache();
// cache занимает память, пока существует getCache

Здесь cache будет жить в памяти пока существует функция getCache, даже если мы больше не используем её данные.

🔹 Решение 1: функция очистки

Можно добавить метод для обнуления ссылок, чтобы GC мог очистить объект:

function createCache() {
    let cache = { largeData: new Array(1000000).fill('*') };

    function getCache() {
        return cache;
    }

    getCache.cleanup = function () {
        cache = null; // память освобождается
    };

    return getCache;
}

const getCache = createCache();
getCache.cleanup(); // теперь память под cache может быть освобождена

🔹 Решение 2: WeakMap для временных данных

Если нужно хранить состояние объектов, но не держать их в памяти навсегда, используйте WeakMap. Сборщик мусора автоматически очистит объект, когда на него не останется ссылок.

const objectData = new WeakMap();

function attachData(obj) {
    objectData.set(obj, { temp: 'data' });
}

let obj = {};
attachData(obj);

obj = null; // объект и данные в WeakMap будут автоматически удалены

🔹 Резюме: как безопасно использовать замыкания

- Не храните в замыканиях лишние объекты.
- Для больших структур или временных данных используйте WeakMap/WeakSet.
- Добавляйте функции очистки (cleanup) для объектов и стейта, которые больше не нужны.
- Проверяйте память через DevTools, чтобы убедиться, что объекты удаляются.

💡 Совет для разработчиков:
Любой state или кеш, который вы храните в замыкании, должен иметь «точку выхода» — иначе ваше приложение постепенно «накопит» память, которая больше не используется.

#оптимизации #react #frontend #память #замыкания

👩‍💻 ВЕСЬ React в одном собеседовании. 100 вопросов + 20 задач за 2 часа

Это видео представляет собой структурированный разбор ключевых тем React, необходимых для успешного прохождения технического собеседования. Формат сочетает теоретические вопросы с практическим решением задач.

Рекомендую посмотреть это видео, как и предыдущее. Считай, сразу готов к собесам 😎

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 Ссылка на вопросы и задачи

00:00:00 Введение: тема собеседования по React
00:01:44 Что такое React
00:02:43 React как библиотека
00:03:40 SPA-приложения
00:05:25 Компонентный подход
00:06:12 JSX
00:07:11 Состояние и props
00:08:05 Рендеринг списков
00:09:44 Условный рендеринг
00:12:38 Триггеры рендера
00:13:08 Изменение пропсов и перерендер
00:14:25 Роль хуков в React
00:15:41 Основные хуки
00:16:37 Дополнительные хуки
00:18:34 Оптимизация с помощью мемоизации
00:21:02 Жизненные циклы компонентов
00:23:01 Фазы жизненного цикла
00:24:21 Жизненные циклы компонента
00:25:13 Жизненные циклы в функциональных компонентах
00:26:47 Ленивая инициализация состояния
00:27:28 React Children
00:28:27 Обработка данных запроса
00:32:59 Рефакторинг компонента
00:37:38 Оптимизация функции
00:41:07 Работа с запросами и событиями
00:42:37 Сервис «Хаб»
00:43:54 Функциональность тренажёра
00:44:55 Задания на консоль
00:46:23 React Memo
00:51:14 Рефакторинг кода
00:54:24 Обработка событий в React
00:55:54 React Fragment
00:56:15 Проп-дриллинг
00:57:10 Контексты в React
00:57:33 Контролируемые и неконтролируемые входы
00:58:27 Порталы в React
00:59:54 Создание контекста
01:00:54 useEffect vs useLayoutEffect
01:01:32 Использование useRef
01:02:31 Кастомные хуки
01:03:30 Мемоизация и кэширование
01:06:04 Хуки как декораторы
01:07:11 UserUseContext
01:08:04 ImperativeHandle
01:09:24 Поднятие и опускание состояния
01:11:06 Реф и форвард реф
01:13:12 Пьюр компонент
01:14:14 Эра баундере (Error Boundary)
01:15:25 React Router
01:16:18 Render Props
01:18:40 Синтетические события
01:19:40 Управляемый и неуправляемый input
01:22:33 Кастомный хук toggle
01:26:26 Пример с меню
01:27:02 Рендеринг компонентов
01:28:30 Изменение состояния isValid
01:31:52 Оптимизация рендеринга
01:33:10 Рефакторинг кода и оптимизация
01:37:53 StrictMode
01:38:51 Код-сплит и ленивая загрузка
01:40:15 Анлодинг (загрузка при монтировании)
01:41:24 React Lazy и Suspense
01:42:23 Инструменты разработчика React
01:43:23 Оптимизация в React
01:44:49 Дополнительные оптимизации
01:45:40 Мемоизация и код-сплитинг
01:46:37 Батчинг в React
01:48:58 Реактивность в React
01:50:53 Реализация реактивности
01:51:20 Прокси-объекты и паттерны
01:52:15 Эвристики React
01:53:55 Принудительный рендер
01:54:20 Кастомный хук с debounce
01:57:47 Рекурсивное отображение структуры
02:02:46 Компонент «Файл»
02:06:38 Рефакторинг рендеринга файлов
02:08:50 Завершение и React 18
02:09:44 Конкурентный режим и хуки
02:10:14 Управление конкурентным режимом
02:11:00 React 19: новые возможности
02:11:44 Планировщик Fiber
02:12:44 Фазы рендеринга и коммита
02:12:48 Конкурентный режим и приоритеты
02:13:49 Серверные компоненты
02:15:09 Серверный рендеринг и гидрация
02:16:14 Асинхронные обновления в React
02:17:51 Виртуальный и теневой DOM
02:18:42 Типы элементов в React
02:19:11 Принцип единой ответственности
02:20:05 Принцип открытости-закрытости
02:21:42 Принципы SOLID в React
02:22:31 Render-пропсы и слоты
02:23:25 Антипаттерн компоновщика
02:24:22 Изучение паттернов
02:26:18 Подготовка к собеседованиям

#react #собеседования