🖥 5 типичных задач по JavaScript на собеседовании

В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

- Задача на строки, методы и циклы
- Задача на строки, циклы и условия
- Задача на колбек, массивы, прототип и циклы
- Задача на объекты, массивы, графы и цепочки
- Задача на промисы, замыкания и асинхронность

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

#frontend #javascript #функции

🎙 Собеседование в OZON Tech на позицию Middle Frontend Разработчик

Два этапа тех собесов с задачами и вопросами. Вопросы были разнообразные: http, cors, browser и тд.

1. Переписать функцию с помощью async/await

getJson('json/1')
  .then(json => {
    if(json.key) {
      return getJson('json/2')
    }
    throw new Error('No key')
  })
  .then(json => {
    return json.key2
  })
  .catch(e => {
    console.log(e)
  })

2. Написать обертку вокруг нативного fetch, которая будет в случае ошибки пробовать еще retriesCount раз, и только потом упадет с ошибкой

function fetchWithRetries(retriesCount, ...fetchArgs) {
    /* */
}

3. Типизировать функцию reduce чтобы она принимала дженерики:

function reduce(array, callback, initial) {
    let acc = initial
    
    for(let i = 0; i < array.length; i++) {
        acc = callback(acc, array[i], i)
    }
    
    return acc
}

4. Написать функцию которая сворачивает диапазоны:

compress([1, 4, 3, 2]) // '1-4'

compress([1, 4]) //'1, 4'

5. Реализовать паттерн наблюдатель:

class Store {
    /*  */
}
  
  const store = new Store()
  
  const firstSubscriber = (data) => console.log('first', data)
  const secondSubscriber = (data) => console.log('second', data)
  
  store.subscribe(firstSubscriber)
  store.subscribe(secondSubscriber)
  
  store.data = {newKey: 'newString'}
  
  /** CONSOLE
   * first {newKey: 'newString'}
   * second {newKey: 'newString'}
   */
  
  store.unsubsribe(firstSubscriber)
  
    /** CONSOLE
   * second {newKey: 'newString'}
   */
}

#interview #frontend

🖥 Разбор задач по Event Loop с собеседований

В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.

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

🔗 СХЕМА

#frontend #javascript #eventloop

👩‍💻 Принципы ООП в 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 Собеседование с разбором. Browser, JavaScript, TypeScript, React. Групповой мок-формат

В этом видео группа ребят, которые хотят устроиться на работу в IT, отвечают на теоретические вопросы от ведущего ментора. Это полноценная тренировка: участники учатся выступать перед аудиторией, формулировать свои мысли, дополнять ответы других и внимательно слушать, как отвечают их коллеги. В этом видео мы поговорим о ключевых технологиях: Browser, JavaScript, TypeScript и React.

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

#frontend #interview

🎙 Собеседование в компанию Точка

На позицию Middle Frontend Разработчик

Большая часть собеседования состоит из кодинга в перемешку с теоретическими вопросами.

1. В каком порядке будут выведены логи?

console.log('1')
Promise.resolve('2')
    .then((res) => {
      console.log(res);
      
      Promise.resolve('3')
        .then((res) => {
          console.log(res);
          setTimeout(() => {console.log('4')}, 0);
        })    
    })
    .then((res) => console.log(res))
    .finally((res) => {
      console.log(res);
      setTimeout(() => {console.log('5')}, 0);
    });
console.log('6');

2. А если изменив первый Promise?

console.log('1')
Promise.reject('2')
    .then((res) => {
      console.log(res);
      
      Promise.resolve('3')
        .then((res) => {
          console.log(res);
          setTimeout(() => {console.log('4')}, 0);
        })    
    })
    .catch((res) => console.log(res))
    .then((res) => console.log(res))
    .finally((res) => {
      console.log(res);
      setTimeout(() => {console.log('5')}, 0);
    });
console.log('6');

3. Что выведет этот код?

function foo() {
  const x = 10;

  return {
    x: 20,
    bar: () => {
      console.log(this.x)
    },
    baz: function() {
      console.log(this.x)
    }
  };
}

const obj1 = foo();

obj1.bar();    // ...
obj1.baz();       // ...

const obj2 = foo.call({ x: 30 });
obj2.bar();    // ..
obj2.baz();       // ...

4. Напиши и типизируй функцию для определения типа фигуры

type Rectangle = {
  width: number ;
  height: number ;
};

type Circle = {
  radius: number;
};

type AvailableFigure = Rectangle | Circle;

function isCircle(figure) {
  ...
}

function getCircleArea(figure: Circle): number {
    return Math.pow(figure.radius, 2) * Math.PI
}

function getRectangleArea(figure: Rectangle): number {
    return figure.width * figure.height
}

function getArea(figure: AvailableFigure): number {
  return isCircle(figure)
    ? getCircleArea(figure)
    : getRectangleArea(figure);
}

5. Напиши нативный Pick<>

type MyPick<T, U extends keyof T> = {
    [key in U]: T[key] 
}

Все эти задачи мы разбирали в видео:
- 5 типичных задач по TypeScript для Frontend собеседований
- Разбор задач по Event Loop с собеседований
- 5 типичных задач по JavaScript на собеседовании

#interview

👩‍💻 Сложное Frontend Собеседование + Live Coding. Promises, This, Memo, Generics, Solid, HTTP

Изначально запись этого собеседования не планировалась для публикации — она была сделана для детального разбора навыков и поведения Даниила. Для него это был первый опыт мокового собеседования, и, как он сам отметил, волнение и стресс сопровождали его на протяжении всего процесса. Однако такой формат оказался крайне полезным: он позволил объективно оценить слабые места и наметить план работы.

Какие проблемы выявил разбор?
- Ответы давались кратко, без необходимой аргументации и пояснений
- Активное использование слов-паразитов: «наверное», «вроде», «не знаю», что создавало впечатление неуверенности
- Даже правильные ответы звучали неубедительно из-за нерешительной манеры подачи
- Многие вопросы оставались раскрытыми неполно, без углубления в суть
- На базовые вопросы, которые кажутся очевидными, давались неполные или частично верные ответы

Сейчас в планах — интенсивная подготовка в течение двух недель, чтобы проработать все слабые места и пройти собеседование снова. Запись и разбор собеседований — один из самых эффективных способов увидеть себя со стороны и улучшить навыки коммуникации и технические знания.

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

#frontend #interview

👩‍💻 Техническое собеседование в VK на проект Mail

На собеседованиях в VK всегда интересные и достаточно сложные этапы. Дают алгоритмические задачи, глубоко спрашивают про опыт, задают много теоретических вопросов. Также часто встречаются вопросы на рассуждение — например, как бы вы поступили в той или иной ситуации.

Вопросы:
- Что делают preventDefault и stopPropagation?
- Как работают call, apply и bind? В чем их разница?
- В чем разница между arrow function и function declaration?
- Как ускорить алгоритмическую сложность кода?
- Как ускорить работу функции?
- Как удалить или вставить произвольные элементы из массива?
- Как перехватывать JavaScript-ошибки на странице?
- В чем разница между throw 'message' и throw new Error('message')?
- Чем можно заменить position: sticky, если бы его не существовало?
- Для чего нужен Service Worker?
- Как отменить fetch-запрос?
- Как получать данные в реальном времени?
- Зачем нужен Virtual DOM?
- Зачем нужны State Manager и Контекст? Почему нельзя просто использовать переменные?

Ответы на вопросы тут

#frontend #interview

👨‍💻 План развития 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

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

Раньше, чтобы устроиться разработчиком, хватало умения писать код. Сейчас всё сложнее. Даже если ты уверенно работаешь с React или TypeScript, этого мало. Тебе придётся освоить целый пласт навыков, никак не связанных с программированием:

- Как составить резюме, которое заметят?
- Как пройти скрининг и собеседование?
- Где искать вакансии, которые не публикуют на HeadHunter?
- Как общаться с HR и не провалить службу безопасности?

Каждая мелочь — это +1% к твоим шансам. А в нынешней конкуренции даже один процент может решить всё.

Справедливо ли, что вместо углубления в технологии приходится месяц учить «правила игры»? Нет. Но так работает естественный отбор. Многие не выдерживают этого давления и сходят с дистанции.

💡 Какие у тебя варианты?

1. Стажировки и джун-позиции
Подаваться на все стажировки, проходить собеседования, конкурировать с тысячами таких же новичков. Компании часто хотят, чтобы джун за 40к работал как мидл. Если получится — отлично. Но шансы невелики.

2. Фриланс
Можно искать заказы, брать простые проекты, получать первые деньги. Но тут свои сложности:
- Проекты чаще всего типовые, без роста скиллов.
- Заказы могут пропадать на месяцы.
- Первого клиента найти крайне сложно.

3. Стартап за печеньки
Сейчас активно развивается множество новых проектов, и многим начинающим стартаперам нужны недорогие разработчики для их реализации. Это ситуация Win-Win: вы получаете хоть какие-то деньги, а стартап — разработчиков.
Отличный старт для начала карьеры! Вам сразу дадут серьёзные задачи, а не стажёрскую рутину.

4. Приукрашивание опыта
Если ты серьезно подходил к обучению и делал пет-проекты, почему бы не подать их как коммерческий опыт? Делал приложение с рецептами? Можно сказать, что разрабатывал систему для кондитерской сети. Писал бота для друзей? Заявишь, что делал MVP для стартапа.
Главное — не перегибать и быть готовым к вопросам.

5. Накрутка опыта (хардкор-вариант)
Звучит страшно, но давай начистоту: даже мидлы с 3–4 годами опыта сейчас не всегда проходят скрининг. Что уж говорить о новичках?

Накрутка — это сложно. Ты должен:
- Продумать историю «прошлых проектов» до мелочей.
- Разбираться в архитектуре, инфраструктуре, процессах.
- Быть готовым к боевым задачам.

Это риск, но для некоторых — единственный шанс пройти отбор.

Выбор всегда за тобой, но помни: в условиях жесткой конкуренции иногда приходится действовать по неочевидным правилам. Однако важно держать уровень: если не умеешь разрабатывать, а лишь поверхностно крутишь опыт — это плохо. То же самое, если не разбираешься в рабочих процессах.

После прохождения курсов удели пару месяцев на проекты — большие, с API, множеством страниц, фичами и библиотеками. Углубляйся в архитектуру и инфраструктуру, осваивай настройку сборщиков и других инструментов. Научись писать тесты и деплоить приложения. Подойди к этому серьезно. Просто крутить код — слабый вариант, нужно еще и соответствовать.

Какой бы путь вы ни выбрали — стажировки, фриланс или коммерческий опыт — важно понимать, как устроена работа в IT:

→ ВНУТРЯНКА АЙТИ: Как здесь все халтурят на самом деле
https://youtu.be/zCamBnDSbxs?si=OlJnsSeKkpIFW883

→ Что такое Git flow и когда использовать?
https://youtu.be/umiT0yIsSrc?si=TCIyckvOeDQMWO2N

→ Как улучшить резюме: Проекты, Процессы и Достижения
https://youtu.be/WemHjWFjh3o?si=yL5oNFeS_lYTHpl1

🔍 В моём закрытом чате есть много записей митапов для учеников. Попробуй 3 дня бесплатно или подпишись за 500₽/мес:

→ Типы компаний
https://t.me/c/2189438448/3/3765

→ Процессы Канбан и Скрам
https://t.me/c/2189438448/3/4146

→ Деплой, Процессы, Скрам, Docker, CI/CD на примере YeaHub
https://t.me/c/2189438448/3/4535

→ Рабочие процессы. Workflow, Gitflow. Взаимодействие внутри команды разработки
https://t.me/c/2189438448/3/4174

#frontend #работа #трудоустройство

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

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

- утечки замедляют приложение со временем
- на мобильных устройствах это может приводить к крашам
- стабильность 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 #память #замыкания

👩‍💻 Как учить Redux и не утонуть в абстракциях

Redux часто вводит новичков в ступор: куча обёрток, абстракций, бойлерплейта, бесконечные конфиги… Нужно держать в голове, что где-то «в одном месте лежат данные», а использовать их можно совсем в другом. Всё это может сбивать с толку.
Разберёмся, как подойти к изучению Redux так, чтобы не перегореть и быстро прийти к результату.

🤔 1. Нужно ли знать старый Redux?

Сегодня знать классический Redux (до RTK) — не обязательно. Но понимать, как он устроен, всё же полезно для кругозора.
Лучше начать с Redux Toolkit (RTK) — это современный, удобный способ работы с Redux.

👉 План простой:
- Изучи RTK: пройди короткий курс, сделай мини-проект.
- Потом, для интереса, быстро глянь, как всё было «по-старинке» — чтобы понимать эволюцию и причины появления RTK.

Продвинутый Redux. Redux Toolkit, RTK query, TypeScript.
Полный курс Redux Toolkit + RTK Query для начинающих

📚 2. Освой базу (и не перегружайся)

На старте тебе нужно знать только основу Redux Toolkit:
- как создавать slice,
- как конфигурировать store,
- как использовать dispatch и useSelector,
- и как подключить всё через Provider.

Этого достаточно, чтобы начать. Не лезь сразу в thunk-и, middleware или сложные конфиги — это придёт позже. Главное — понять саму идею:

где-то создаются данные → ты можешь их менять → компонент реагирует и перерисовывается.

👨🏻‍💻 3. Практикуйся на реальных мини-проектах

Следующий шаг — практика. Смотри практические видео или мини-курсы вроде «Админка за 6 часов» — где используется React, RTK и другие знакомые технологии. А так же можно прогнать много небольших проектов, чтобы запомнить воркфлоу.

🔁 Идея проста:
- Делай много маленьких проектов, а не один гигантский.
- Лучше 10 разных по часу, чем один на 10 часов.

Так ты начнёшь видеть закономерности, узнавать шаблоны и быстрее адаптироваться к разным кейсам.

Build and Deploy a React Cryptocurrency App and Master Redux Toolkit

🚀 4. Создай свой проект

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

Не стремись помнить всё наизусть — важно понимать принцип, а не синтаксис.
Добавляй новые сущности, слайсы, компоненты — играйся с кодом, расширяй границы.

😎 5. Главное — практика

На полноценное освоение основ Redux Toolkit достаточно около 2 недель.
Всё остальное время — практика и интеграция с другими инструментами.
Учись не «изолированно», а в реальных проектах, где Redux работает вместе с React, API, роутингом и UI-библиотеками.

Redux + Redux Toolkit | Продвинутый полный курс

#redux #frontend