👩‍💻 Type Guards в TypeScript

Type Guards - это выражения, проверяющие тип в runtime. Они позволяют сузить тип переменной в блоке кода.

📌 Оператор typeof:
typeof проверяет тип значения во время выполнения. Если val - строка, выполняется первый блок, где доступны строковые методы. Иначе val считается числом, и доступны числовые методы.

function processValue(val: string | number) {
  if (typeof val === "string") {
    console.log(val.toUpperCase()); // val имеет тип string
  } else {
    console.log(val.toFixed(2)); // val имеет тип number
  }
}

📌 Оператор instanceof:
instanceof проверяет, является ли объект экземпляром определённого класса. Если animal - экземпляр Dog, вызывается bark(). В противном случае считается, что это Cat, и вызывается meow().

class Dog {
  bark() {}
}

class Cat {
  meow() {}
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark(); // animal имеет тип Dog
  } else {
    animal.meow(); // animal имеет тип Cat
  }
}

📌 Пользовательские Type Guards:
isFish - это пользовательская функция-проверка типа. Она проверяет наличие метода swim. Если метод есть, функция возвращает true, и TypeScript считает pet объектом типа Fish. Иначе pet считается Bird.

interface Fish { swim: () => void; }
interface Bird { fly: () => void; }

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim(); // pet имеет тип Fish
  } else {
    pet.fly(); // pet имеет тип Bird
  }
}

#frontend #react #typescript

Отличие useMemo от useCallback

📌 useMemo():
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.

📌 useCallback():
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.

Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.

#react #memo #useMemo #useCallback

Render Props

Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.

Зачем нужно?

✔️ Повторное использование логики: Логику можно вынести в один компонент и использовать с разным UI.
✔️ Гибкость: Позволяет передавать любую JSX разметку, что делает компонент более универсальным.

#frontend #react

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

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

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

📌 Схема

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

#frontend #react #docker #cicd #deploy

👩‍💻 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

👩‍💻 Рендеринг в 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