Руслан Куянец | Reactify

⁉️ Почему использование классов полезно

- Инкапсуляция логики: Классы позволяют группировать связанные функции и данные вместе. В нашем примере ApiService отвечает только за HTTP-запросы, а TodoService — за управление задачами. Это разделение ответственности облегчает понимание и поддержку кода.
- Повторное использование кода: Общие методы, такие как get, post, put, delete в ApiService, могут быть использованы разными сервисами (не только TodoService). Это уменьшает дублирование кода и облегчает внесение изменений в одном месте.
- Удобство тестирования: Классы облегчают написание модульных тестов. Можно протестировать методы классов изолированно, замокав зависимости, такие как API-запросы.
- Масштабируемость: При росте приложения можно легко добавлять новые сервисы, наследуя или расширяя существующие классы. Это делает архитектуру приложения гибкой и устойчивой к изменениям.
- Поддержка и читаемость: Структурированный код легче читать и поддерживать, особенно в больших командах. Классы с четко определенными методами и назначением позволяют быстро понять, где искать нужную функциональность.
- Вынесение общих частей: Общие части, такие как базовый URL или заголовки запросов, можно определить в одном месте (ApiService), что упрощает их изменение и управление.

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

#frontend

Организация кода с использованием классов в JavaScript

Организация кода с использованием классов в JavaScript позволяет структурировать функциональность приложения, делая его более читаемым, поддерживаемым и масштабируемым. Рассмотрим два примера классов: один для управления API-запросами, другой для работы с задачами TODO.

⌛️ Класс для организации API-запросов
Этот класс будет отвечать за выполнение HTTP-запросов к различным конечным точкам API. Он может содержать методы для GET, POST, PUT, DELETE и других типов запросов, а также обрабатывать общие параметры, такие как заголовки и обработка ошибок.

class ApiService {
  constructor(baseURL, defaultHeaders = {}) {
    this.baseURL = baseURL;
    this.defaultHeaders = defaultHeaders;
  }

  async request(endpoint, method = 'GET', data = null, headers = {}) {
    const config = {
      method,
      headers: { ...this.defaultHeaders, ...headers },
    };

    if (data) {
      config.headers['Content-Type'] = 'application/json';
      config.body = JSON.stringify(data);
    }

    try {
      const response = await fetch(`${this.baseURL}${endpoint}`, config);
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || 'Ошибка сети');
      }
      return await response.json();
    } catch (error) {
      console.error(`Ошибка при выполнении запроса: ${error.message}`);
      throw error;
    }
  }

  get(endpoint, headers = {}) {
    return this.request(endpoint, 'GET', null, headers);
  }

  post(endpoint, data, headers = {}) {
    return this.request(endpoint, 'POST', data, headers);
  }

  put(endpoint, data, headers = {}) {
    return this.request(endpoint, 'PUT', data, headers);
  }

  delete(endpoint, headers = {}) {
    return this.request(endpoint, 'DELETE', null, headers);
  }
}

🖥 Класс для работы с TODO
Этот класс будет использовать ApiService для взаимодействия с сервером и управлять задачами TODO. Он будет включать методы для создания, получения, обновления и удаления задач.

class TodoService {
  constructor(apiService) {
    this.api = apiService;
    this.endpoint = '/todos';
  }

  // Получить все задачи
  getAllTodos() {
    return this.api.get(this.endpoint);
  }

  // Получить задачу по ID
  getTodoById(id) {
    return this.api.get(`${this.endpoint}/${id}`);
  }

  // Создать новую задачу
  createTodo(todoData) {
    return this.api.post(this.endpoint, todoData);
  }

  // Обновить существующую задачу
  updateTodo(id, updatedData) {
    return this.api.put(`${this.endpoint}/${id}`, updatedData);
  }

  // Удалить задачу
  deleteTodo(id) {
    return this.api.delete(`${this.endpoint}/${id}`);
  }
}

✔️ Пример использования

const api = new ApiService('https://api.example.com', {
  Authorization: 'Bearer your-token-here',
});

const todoService = new TodoService(api);

// Получить все задачи
todoService.getAllTodos()
  .then(todos => console.log(todos))
  .catch(error => console.error(error));

// Создать новую задачу
todoService.createTodo({ title: 'Новая задача', completed: false })
  .then(todo => console.log('Создано:', todo))
  .catch(error => console.error(error));

Какие проблемы вас ждут во время обучения и как их обойти?

Недавно выступал для студентов с докладом. Список проблем из видео:
🌧 Что учить? Так много технологий, как выбрать?
🌧 Я ничего не запоминаю, слишком много терминов
🌧 Я не могу понять тему
🌧 Я не могу писать код сам
🌧 Мой код не работает
🌧 Я застрял, не знаю, что учить дальше
🌧 Я теряю мотивацию и мне лень учиться

Будет полезно посмотреть для новичков. Начало с 48:40 минуты

https://boosty.to/m0rtymerr/posts/b82357bd-fa1b-4f6d-8205-6acf9ed92f91?share=post_link

YeaHub, уже скоро, но это не точно😅

Скоро сделаю пост о платформе YeaHub. Расскажу, что это, какая идея

До 4 ноября будем тестировать!

#yeahub

🛡 Пример сильных достижений в ваше резюме.

Примерно такие достижения добавляют ученики после практики в YeaHub.

✔️ Запустил ленты новинок и популярных материалов, автоматически обновляющиеся через Redux Toolkit и RTK Query для получения данных, что упростило поиск актуального контента и повысило его доступность.

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

✔️ Разработал рейтинговую систему для преподавателей, оценивающую активность и популярность материалов с использованием данных из RTK Query, что мотивировало авторов и повышало качество контента на платформе.

✔️ Реализовал панель управления публикациями для преподавателей, используя React, Redux Toolkit и Formik для создания форм, что позволило авторам легко создавать, редактировать и удалять свои материалы, а также отслеживать популярность публикаций и взаимодействие с пользователями.

Что тут есть?
1. Сильные слова (например, "Запустил", "Внедрил").
2. Ключевые слова (такие как "Redux Toolkit", "RTK Query").
3. Бизнес-кейсы (например, рейтинг преподавателей).
4. Польза для бизнеса (упрощение поиска актуального контента).

В YeaHub уже расписано более 50 достижений. Суть в том, что ученики реально делали это, и у них есть примеры, на которые можно посмотреть, чтобы понять, что изучить. Также есть гайд и конспект по архитектуре YeaHub — как происходит деплой, как настроен Webpack, как работает CI/CD и так далее. Это закрывает любые вопросы по опыту на собеседовании. Я называю это "умной накруткой опыта", когда ты прокачиваешься и практикуешься 2-3 месяца, а потом идёшь трудоустраиваться на Middle с реальными кейсами, а не выдуманными из головы.

👍 Полный гайд по резюме есть тут - ГАЙД В НОУШЕН

👍 Сегодня я выступаю на стриме для студентов технических вузов с сообществом "Осознанная Меркантильность". Тема: "Какие проблемы вас ждут во время обучения и как их обойти". Честно говоря, у меня до сих пор есть страх публичных выступлений — стеснение и нервозность всё ещё со мной.

Что интересно, сейчас я нахожусь в отпуске: отель 5 звезд с "всё включено", бассейн, спа, развлечения на любой вкус. Но, несмотря на это, я осознанно выбираю выделить 3-4 часа своего времени, чтобы участвовать в стриме. Это мой способ выйти из зоны комфорта. На протяжении всего отпуска я продолжаю работать над проектом YeaHub, созваниваться с учениками и готовить лекции. Это ещё один выход из зоны комфорта, который приближает меня к успеху.

А что вы делаете, чтобы достичь своих целей?👇👇👇

🌧 Зона комфорта

Многие начинают свой путь в IT, думая, что достаточно выучить технологии и написать пару проектов, чтобы получить работу. Но реальность такова, что IT — это не просто про код. Это постоянный выход из зоны комфорта.

Если вы сидите и ждете, что вам придет приглашение на работу, то, возможно, так и будете сидеть долго. Мир IT требует от вас инициативы. Здесь важно не только техническое мастерство, но и умение себя подать, показать свою ценность. Вы должны быть активным участником сообщества, искать возможности, стучаться в двери, даже когда кажется, что они закрыты.

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

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

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

Выходите за пределы своей зоны комфорта — и вы увидите, как открываются новые возможности!

Суббота и воскресенье даны для того, чтобы обойти тех, кто отдыхает. У тебя есть два дня преимущества. - Куянец Р.

#it #motivation

👩‍💻 Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy

В этом видео мы подробно рассмотрим архитектуру Frontend-приложений, начиная с технологий и инструментов, заканчивая настройками и деплоем. Это будет комплексный обзор всех ключевых компонентов архитектуры: React, Redux, Storybook, Webpack, Docker, Nginx, CI/CD и других технологий.

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

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

🔗 Вы знаете, как с пользой провести выходные: ВИДЕО

#frontend

Привет всем! За последние 6 месяцев в сообществе ОМ я многое переосмыслил и понял одну важную вещь

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

📌 Конкуренция — это норма: Если ты не борешься за своё место, тебя обходят другие. Компании делают всё, чтобы держать тебя в неведении, манипулируя предложениями и скрывая реальную причину отказа. Это рынок: либо ты играешь в полную силу, либо остаёшься без работы.

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

🔗 ВСЕ УЛОВКИ КОМПАНИЙ

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

Но важно понимать: ОМ не учит халяве и безделью. Здесь не про то, чтобы накрутить опыт, влезть на мидла и сидеть без дела. В сообществе призывают к трудолюбию — чтобы подготовиться, нужно реально много работать над собой.

ОМ учит ценить себя и своё время. Никакой работы ради «опыта» и печенек. Ты работаешь — ты получаешь достойную оплату. В комьюнити есть гайды, чаты, ресурсы — всё, чтобы ты мог расти и добиваться своих целей.

В это воскресенье (6 октября) подписки для новых участников закроются на неопределённое время. Если хочешь попасть — не пропусти.

🔗 ТУТ ОПИСАНЫ ВСЕ БОНУСЫ
🔗 ФИЛОСОФИЯ СООБЩЕСТВА

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

В комментариях я добавлю ссылку на пробную подписку на 3 дня. За это время вы сможете изучить материалы по созданию резюме, подготовке к собеседованиям, развитию софт-скиллов и многому другому. Если вам понравится, будет возможность оформить полноценную подписку.

🖥 Управление состоянием с помощью паттерна Observer

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

Рассмотрим, как создать и использовать простую реализацию этого паттерна для управления состоянием.

✏️ Создание Observable
В отдельном файле создадим функцию, которая будет хранить состояние и управлять подписчиками. Назовем её createObservable:

// observable.js
export const createObservable = (initialState = []) => {
  let state = initialState;
  let observers = [];

  // Метод для уведомления всех подписчиков об изменениях
  const notify = () => {
    observers.forEach((observer) => observer(state));
  };

  return {
    // Метод для подписки на изменения
    subscribe: (observer) => {
      observers = [...observers, observer];
    },
    // Метод для отмены подписки
    unsubscribe: (observer) => {
      observers = observers.filter((obs) => obs !== observer);
    },
    // Метод для изменения состояния и уведомления подписчиков
    setState: (newState) => {
      state = newState;
      notify();
    },
    // Метод для получения текущего состояния
    getState: () => state,
  };
};

💭 Создание хранилища (Store)
Теперь вместо использования обычного массива, создадим состояние для списка фильмов, используя наш createObservable. Это позволит нам централизованно управлять состоянием и уведомлять подписчиков об изменениях.

// store.js
import { createObservable } from './observable';

const moviesObservable = createObservable([]);

⌛️ Добавление данных в хранилище
Теперь предположим, что вы загружаете данные о фильмах с API:

const fetchMovies = async (query) => {
  const response = await fetch(`https://api.example.com/movies?search=${query}`);
  const movies = await response.json();
  return movies;
};

// Получаем фильмы и обновляем состояние хранилища
const moviesFromApi = await fetchMovies('Inception');

moviesObservable.setState(moviesFromApi); // Теперь в хранилище у нас массив фильмов

✉️ Подписка на изменения
Когда состояние изменится, нам нужно автоматически отобразить новые данные. Например, создадим функцию displayMovies, которая будет выводить фильмы на экран, и подпишем её на наш moviesObservable:

const displayMovies = (movies) => {
  console.log('Фильмы обновились:', movies);
};

// Подписываемся на изменения в состоянии хранилища
moviesObservable.subscribe(displayMovies);

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

🔔 Получение текущего состояния
Для доступа к текущим данным из хранилища можно использовать метод getState:

const currentMovies = moviesObservable.getState();
console.log('Текущие фильмы:', currentMovies);

Преимущества использования паттерна Observer:
- Централизованное управление состоянием — вся логика управления данными сосредоточена в одном месте.
- Гибкость — вы можете легко добавлять новые подписки или отменять их при необходимости.
- Простота тестирования — можно отдельно тестировать логику хранилища и взаимодействие с подписчиками.
- Отделение состояния от представления — подписчики отвечают только за реакцию на изменения, а само хранилище не зависит от реализации компонентов интерфейса.

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

Использование паттерна Observer — это хорошая база для перехода к более сложным инструментам управления состоянием, таким как Redux или MobX.

#javascript #store #observer

🔝 Митап по Feature-Sliced Design (FSD)

Сегодня я буду проводить митап для учеников, посвященный Feature-Sliced Design (FSD). На онлайн-сессии разберем структуру страницы приложения, детализируя её на слои, срезы и сегменты. Покажу, как декомпозировать проект на бизнес-сущности и правильно организовать файловую структуру. Мы не только разложим все по полочкам, но и рассмотрим принципы, правила и реальные лайфхаки для обхода возможных сложностей при использовании FSD.

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

📌 Принципы и паттерны, которые помогают понять FSD:

✔️ Принцип единственной ответственности (Single Responsibility Principle): каждый срез отвечает только за одну конкретную задачу или сущность.
✔️ Разделение областей видимости (Separation of Concerns): логика и представление четко изолированы по слоям.
✔️ Принцип инверсии зависимостей (Dependency Inversion Principle): верхние уровни приложения зависят только от интерфейсов или контрактов нижних слоев.
✔️ Open/Closed Principle: компоненты и срезы легко расширяются, но сложно модифицируются, что улучшает устойчивость к изменениям.
✔️ Композиция вместо наследования (Composition over Inheritance): через FSD можно легко композировать логику и компоненты без сложных иерархий.
✔️ Чистая архитектура (Clean Architecture): соблюдается иерархия и направленные зависимости.
✔️ Декомпозиция и агрегация: декомпозируя сущности, мы создаем более мелкие и независимые модули, которые затем агрегируются в более сложные структуры.

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

#frontend #fsd #react

Я постоянно говорю о пользе сообщества: оно мотивирует, даёт ответы на вопросы и поддержку. У моего коллеги есть интересный формат — они создают продукты за 1-2 месяца и выводят их на рынок. Участники прокачивают свои навыки и работают над реальными проектами с нуля до релиза.

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

Что они предлагают:
- Избежать ошибок новичков — научат запускать проекты с минимальными ресурсами.
- Возможность запустить пет-проект, который станет отличной строкой в резюме.
- Работа в сильной команде: полный цикл разработки от идеи до релиза.
- Обмен опытом с профессионалами в разработке, аналитике, инфраструктуре и маркетинге.
- Шанс создать свой успешный стартап.
- В этом сезоне принимаются новички без коммерческого опыта, но с опытом работы над собственными проектами и желанием развиваться в стартапах.
- При высокой вовлечённости и прогрессе возможно получение финансовой поддержки уже после второго спринта (2 недели).

Как это работает:
1. Помогут проверить идею и построить дорожную карту.
2. Соберут команду из 2-5 человек, предоставят всю инфраструктуру и инструменты.
3. Организуют консультации с опытными специалистами.
4. Через 1-2 месяца команда выпускает продукт.

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

Sprint Labs — это сообщество для тех, кто готов не просто мечтать, а действовать и создавать.
https://forms.gle/W9HCQhAkXXMjjFs36

👩‍💻 Рендеринг в React

В React рендеринг — это процесс, при котором компонент заново отрисовывается на основе новых данных. Этот процесс происходит по нескольким причинам:

📌 1. Изменение состояния (state)
Если состояние компонента меняется, React автоматически запускает его ререндеринг. Например:

const CounterButton = () => {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me {count} times
    </button>
  );
};

Когда мы вызываем setCount, значение count меняется, что приводит к ререндерингу компонента, чтобы отобразить обновлённое число.

📌 2. Изменение пропсов (props)
Пропсы сами по себе не являются первичной причиной ререндеринга, а скорее следствием изменения состояния в родительском компоненте. Если состояние родителя обновляется, он перерисовывается и передает изменённые пропсы дочернему компоненту. Это приводит к ререндерингу дочернего компонента:

// Родительский компонент
const Parent = () => {
  const [text, setText] = useState('Hello');

  return (
    <>
      <Child message={text} />
      <button onClick={() => setText('Hello, World!')}>Change Text</button>
    </>
  );
};

// Дочерний компонент
const Child = ({ message }) => <div>{message}</div>;

Когда setText меняет состояние text, компонент Parent перерисовывается, и передаёт новое значение пропса message в Child, что вызывает ререндеринг дочернего компонента.

Примечание: При использовании React.memo изменения пропсов действительно считаются причиной ререндеринга, если новый пропс отличается от предыдущего.

📌 3. Изменение контекста (Context)
Если компонент использует контекст (useContext или <Context.Consumer>), и его значение меняется, то все компоненты, подписанные на этот контекст, будут перерисованы:

const ThemeContext = React.createContext('light');

const Parent = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme('dark')}>Toggle Theme</button>
    </ThemeContext.Provider>
  );
};

const Child = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
};

Когда значение контекста theme изменяется (например, с 'light' на 'dark'), компонент Child ререндерится, чтобы отобразить новое значение темы.

📌 4. Ререндеринг родительского компонента
Даже если состояние компонента и его пропсы остаются неизменными, он будет перерисован, если родительский компонент ререндерится (даже без видимых изменений). Это связано с тем, что дочерние компоненты автоматически ререндерятся вместе с родительским компонентом. Например:

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </>
  );
};

const Child = () => <div>I'm a child</div>;

Здесь Child не зависит от состояния count, но каждый раз, когда Parent ререндерится, Child ререндерится тоже. Это можно предотвратить с помощью React.memo.

❓ Как избежать лишних ререндеров?

✔️ React.memo: предотвращает ререндеринг компонента, если его пропсы не изменились.
✔️ Хук useCallback и useMemo: сохраняют функции и значения, чтобы они не создавались заново при каждом ререндеринге.
✔️ Оптимизация контекста: разбивайте контекст на отдельные провайдеры, чтобы уменьшить количество компонентов, реагирующих на изменение его значения.

#react #frontend #memo #render

Паттерн Наблюдатель в React. Продвинутый Frontend на реальных примерах

В этом видео мы рассмотрим Паттерн Наблюдатель (Observer) в контексте React и Frontend разработки.

Для проекта Маркет используем Vite, FSD, TypeScript.

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

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

#frontend #patterns #observer

👩‍💻 React Fiber

Ранее React использовал механизм Stack Reconciler для обновления интерфейсов, что приводило к проблемам с производительностью. Одним из главных недостатков было невозможность приостановить и возобновить рендеринг, что могло вызывать "замораживание" интерфейса при выполнении тяжёлых операций. Чтобы устранить этот недостаток, начиная с React 16, была создана новая архитектура — React Fiber.

❓ Что такое React Fiber?

React Fiber — это переработанная структура внутреннего устройства React, которая управляет процессом рендеринга и согласования (reconciliation). Основное нововведение заключается в том, что теперь React разбивает весь процесс обновления на мелкие задачи, которые можно:

1. Приостанавливать.
2. Прерывать для выполнения более важных операций.
3. Возобновлять с того же места.
4. Отменять обновления, если компонент больше не нужен.

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

📈 В чём ключевая идея Fiber?

Вместо использования традиционного стека для отслеживания состояния компонентов, Fiber создаёт связанную структуру данных для каждого элемента виртуального DOM. Это позволяет React двигаться вперед и назад по компонентному дереву, задавать приоритет задач и управлять состояниями на уровне узлов.

Каждый узел Fiber содержит:
- Тип компонента (функциональный, классовый или элемент DOM).
- Ссылки на дочерние, родительские и соседние узлы.
- Текущее состояние и приоритет выполнения.

Такой подход позволяет React выполнять задачи в соответствии с их приоритетом:
- Высокий приоритет: действия пользователя (клики, ввод текста).
- Низкий приоритет: обновление анимации или загрузка данных.

🖥 Как это работает на практике?

React Fiber использует две основные фазы рендеринга:

📌 Фаза рендеринга (Render Phase):
React создаёт новое дерево Fiber, вычисляя, какие изменения должны быть сделаны.
Эта фаза может прерываться и возобновляться.

📌 Фаза выполнения (Commit Phase):
Все изменения применяются к реальному DOM.
Происходит быстро и синхронно, чтобы интерфейс обновлялся без задержек.

🛡 Особенности React Fiber:

- Time Slicing: React разбивает выполнение задач на короткие промежутки времени, чтобы не блокировать интерфейс.
- Асинхронный рендеринг: позволяет приостанавливать и возобновлять рендеринг компонентов.
- Гибкое управление задачами: React определяет, какие задачи выполнять первыми, а какие можно отложить, чтобы обеспечить плавное взаимодействие с пользователем.

#frontend #react

#interview #summary
Проходим собеседование

Что такое Web Worklet?

Какие в CSS есть виды градиентов?

Что такое IP адрес?

Какая будет последовательность вывода console.log

Что делает элемент <output> в HTML5?

Для чего используется атрибут enterkeyhint?

Что подразумевает первая буква S в принципе разработки программного обеспечения SOLID?

Какие в TypeScript есть модификаторы доступа?

Какой будет вывод в консоль?