
## Концепции

1. Абстракция
2. Инкапсуляция
3. Наследование
4. Полиморфизм

### Абстракция

Абстракция позволяет нам сосредоточиться на том, **что** делает объект, а не на том, **как** он это делает.

#### В TypeScript реализованы **абстрактные классы** ключевым словом `abstract`. <span id="abstract-class"/>

От абстрактного класса нельзя создать экземпляр.
Пример из Revuud: абстрактный класс — User, конкретные классы — Talent и Admin.

Цель — не дублировать код

[ссылка на пример с абстрактным классом](#abstract-class-example)

### Инкапсуляция

Это разделение интерфейсов на внутренний и внешний — приватные и публичные свойства/методы.

Цель — ограничить внешних пользователей от изменений внутреннего интерфейса, чтобы ничего не сломали внутри извне.

Есть конвенция называть приватные свойства начиная с `_`.
На уровне языка реализуется символом `#`:

```js
class Person {
    #_privateField: 'value'
    #_privateMethod () {}
}
new Person()._privateField// undefined
```

### Наследование

Наследование классов – это способ расширения одного класса другим классом.

Цель — не дублировать код и экономить память, расширять уже существующий функционал.

### Полиморфизм

Это способность вызывать один и тот же метод для разных объектов, и при этом каждый объект реагирует по-своему.
Чтобы это произошло, полиморфизм использует наследование.

### Пример, демонстрирующий все 4 концепции <span id="abstract-class-example"/>

```typescript
abstract class User {
  abstract firstName: string;
  abstract lastName: string;
  abstract sendInvite(): void; //! 1. принцип абстракции (нет реализации, только объявление)

  get fullName() {
    // неабстрактный метод с логикой
    return this.firstName + this.lastName; // в отличие от интерфейса здесь можно писать логику
  }
}

new User(); // Ошибка, нельзя создать экземпляр абстрактного класса

class Admin extends User {
  //! 3. принцип наследования (расширяем конкретный класс от абстрактного)
  firstName;
  lastName;

  constructor(firstName: string, lastName: string) {
    super();
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    //! 4. принцип полиморфизма (переопределяем геттер родителя, чтобы он работал по-другому)
    return this.firstName + " last name is NDA for admins";
  }
  sendInvite() {
    //! 4. принцип полиморфизма (реализуем абстрактный метод по-разному в 2 дочерних классах)
    const author = this.fullName;
    alert({ type: "admin", author }); //фиктивная функция отправки
  }
}

class Talent extends User {
  //! 3. принцип наследования (расширяем конкретный класс от абстрактного)
  firstName;
  lastName;

  #age: number; //2. инкапсуляция (приватное поле)

  constructor(firstName: string, lastName: string, age: number) {
    super();
    this.firstName = firstName;
    this.lastName = lastName;

    this.#age = age;
  }
  sendInvite() {
    //! 4. принцип полиморфизма (реализуем абстрактный метод по-разному в 2 дочерних классах
    const author = super.fullName; //! 3. наследование, вызываем геттер родительского класса
    alert({ type: "talent", author }); //фиктивная функция отправки
  }
}

const john = new Talent("John", "Smith", 30);
//! 2. инкапсуляция (приватное поле недоступно вне класса Talent)
john.#age; // SyntaxError
```


Объектно-ориентированное программирование и OOP в JavaScript


## Common

### Complex types of data

#### Map - ассоциативный массив / словарь

> Это объект, где ключом может помимо строки быть любой тип данных

Пример оптимизации Мапом

```js
// было
const getAssets = async () => [
  //pseudo-GET req
  { symbol: "APPL", price: 100 },
  { symbol: "GOOG", price: 50 },
  { symbol: "MSFT", price: 25 },
];
const resp = await getAssets();
// iterates every time in Biseness Logic Layer
resp.find((asset) => asset.symbol === "MSFT");
// стало
const transformAssetsArrayToMap = async () => {
  const respArray = await getAssets();
  const respMap = new Map();
  // iterates 1 time in Data Acess Layer
  respArray.forEach((asset) => {
    const { symbol, ...rest } = asset;
    respMap.set(symbol, { ...rest });
  });
  return respMap;
};
const resp = await transformAssetsArrayToMap();
// instant in BLL
resp.get("MSFT");
```

#### Set - массив, только с уникальными значениями

Можно отфильтровать дубликаты с массива
`const uniqArr = [...new Set(arr)];`

#### WeakMap - словарь со слабыми ссылками

Нужен для того, чтобы помочь **garbage collector** удалить неиспользуемые объекты
т.к. в Map они хранятся даже когда все ссылки в коде на них были перезаписаны

> Ключом могут быть только объекты.
> Не поддерживает методы, которыми можно взять все ключи сразу _(keys(), values(), entries()
> т.к. мы не знаем в какой момент происходит удаление объектов сборщиком мусора)_

Напр. Map

```js
let john = { name: "John" };

let map = new Map();
map.set(john, "...");

john = null; // overwrite the reference

// объект john сохранён внутри объекта `Map`
// и будет занимать место в памяти, хотя уже не используется в коде,
// и доступен только через map.keys()
```

Same code with WeakMap:

```js
let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // перезаписываем ссылку на объект

// объект john !будет удалён из памяти сборщиком!
```

[memoization example with WeakMap](#weakmap-cache)

#### WeakSet

Тоже самое, только Set-подобная структура

> тоже ключи только объекты и тоже удаляет из памяти
> неиспользуемые в иных местах объекты

### Hoisting - поднятие

При поднятии (hoisting) декларации `var` переменных поднимаются и инициализируются значением `undefined`, а объявления функций поднимаются вместе со своей реализацией

**do hoist**:

1. `function declaration(){}`
2. `var`

**don't hoist**:

1. `let functionExpression = () => {}`
2. `let functionExpression = function (){}`
3. `let/const`

It's correct code;

```js
a = 1;
var a; // compilator will hoist this line upper
```

### Boxing/Unboxing

Вызывая `.length` у строки, движок js **оборачивает** примитив `"str"` в `new String("str")`  
и у этого объекта вызывает поле `.length`,
после чего **удаляет** объект, чтобы мы не могли присвоить ему своих полей.

## Objects

### Object creating:

```javascript
//inherite user object as prototype
const admin = Object.create(user);
let admin = { __proto__: user };
let admin = new Object({ __proto__: user });
```

### Object copying:

#### Reference copying

```js
let admin = user;
({}) === {}; // false, objects are never equal, only references
```

#### Shallow copying

1. Object.assign

```js
let user = {
  name: "John",
  age: 30,
};
let anotherObject = { role: "admin" };

let shallowClone = Object.assign({}, user, anotherObject);
```

2. Spread operator

```js
let shallowClone = { ...user, ...anotherObject };
```

#### Deep copying

1. JSON.parse(JSON.stringify(originalObj))

```js
const originalObj = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(originalObj));
```

> - <span style="color:red;font-size:25px;">!!!</span> JSON format doesn't support methods, so you can't copy methods in such way.
> - It's also expensive in computational costs
>
> 2. Recursive copying implementation
> 3. `lodash.deepClone`
> 4. `window.structuredClone` (modern browsers only)
>
> - <span style="color:red;font-size:25px;">!!!</span> structuredClone can't copy methods

## Functions

### Замыкание closure

Когда функция запоминает своё лексическое окружение в скрытом свойстве `[[Environment]]`

Напр. дочерняя функция запомнит параметр родительской функции

<span id="closure"></span>

```js
const maxLengthCreator = (maxLength) => {
  return (value) => {
    return value.length > maxLength
      ? `Max length is ${maxLength} symbols`
      : undefined;
  };
};
const max10 = maxLengthCreator(10); //max10 функция замкнула значение maxLength == 10
max10("This is string more than 10 letters");
```

### Псевдомассив `arguments`

- даже если мы объявили функцию без аргументов, мы всё равно можем передать в неё параметры,
  они попадут в специальный псевдомассив(нет методов массива) и к ним можно будет обратиться по индексам –

- В `use strict` arguments ведет себя по другому, с пересваиванием параметров
- У стрелочных нету псевдомассива arguments

### Современная замена - …rest оператор

`function(first, second, …restArgs){}` – остальные аргументы сложаться в настоящий массив

![spread, rest, destructuring operators](3-dots-syntax.png)

## Asynchrony

### Event loop

#### Ответ на заучить:

1. Компилятор в колл стеке выполняет синхронный код
   - И регистрирует асинхронные задачи в одной из очередей
   - И попутно при необходимости выполняя web API (**!!! Напр.** 10 сек таймера или обработчик события будет висеть и его ждать)
2. Колл стек свободен - Далее выполняются асинхронные задачи
   - начиная с очереди микрозадач, выполняются ВСЕ **микрозадачи** в очереди
     - начиная с **самой старой**
   - ТУТ РЕРЕНДЕР
3. Колл стек и очередь микро свободна - Далее выполняется ОДНА самая старая макрозадача
   - после этого цикл повторяется

#### Theory:

1. **Call Stack** - Это синхронный код.

   - **стэк, стопка** - выполняются **сначала новые**

2. **Callback (Microtask) queue** - После освобождения стека в очереди выполняются микрозадачи

   - микрозадачи могут возвращать другие микрозадачи, создавая **очередь** микрозадач - chain of `.then` & `.catch`)
   - **очередь** - выполняются **сначала старые**
   - помимо промисов есть `queueMicrotask`(Web) & `process.nextTick`(Node)

3. **Macro(task) queue** - После освобождения стека и очереди микрозадач, event loop проверяет наличие макрозадач.
   Самая старая макрозадача помещается в стек, выполняется и затем выполняются **все** новые микрозадачи, добавленные в очередь. Далее выполняется следующая макрозадача и т.д.
   - Это Web APIs (fetch, setTimeout, слушатели событий).

![event-loop.png](event-loop.png)

#### Common cases:

Regular: `Sync code > Async code (micro - high prio) > Browser API code (macro - low prio)`

Macro in Micro (SetTimeout in Promise): `sync code > setTimeout > .then`

```javascript
const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});

promise.then((res) => {
  console.log(res);
});
```

Micro in Macro (Promise in SetTimeout): `sync code > micro > macro`

```javascript
const timer1 = setTimeout(() => {
  console.log("timer1");
  const promise1 = Promise.resolve().then(() => {
    console.log("promise1");
  });
}, 0);

const timer2 = setTimeout(() => {
  console.log("timer2");
}, 0);
```

#### Example:

<https://www.jsv9000.app>

```javascript
function logA() {
  console.log("A");
}
function logB() {
  console.log("B");
}
function logC() {
  console.log("C");
}
function logD() {
  console.log("D");
}
function logE() {
  console.log("E");
}

function timeoutWithPromise() {
  Promise.resolve().then(logE);
}

setTimeout(timeoutWithPromise, 0); // 5
logA(); // 1
setTimeout(logB, 5000); // 6
Promise.resolve().then(logC).then(logA); // 3 - 4
logD(); // 2
```

**Step 1.** **Evaluate Script**

<span style='background-color: yellow'>Synchronously execute the script as though it were a function body. Run until the Call Stack is empty.</span>

1. logA > console.log(A) // call stack
2. logB // task queue
3. logC // microtask queue
4. logD > console.log(D) // call stack

**Step 2. Run all Microtasks**

<span style='background-color: yellow'>Select the oldest Microtask from the Microtask Queue. Run it until the Call Stack is empty. Repeat until the Microtask Queue is empty.</span>

5. logC// from micro to call stack > > console.log(C) // call stack
6. logA // microtask queue (.then chain)
7. logA// from micro to call stack > > console.log(A) // call stack

**Step 3. Rerender**

<span style='background-color: yellow'>Rerender the UI (This step only applies to browsers, not NodeJS).</span>

**Step 4. Run a Task**

<span style='background-color: yellow'>Select the oldest Task from the Task Queue. Run it until the Call Stack is empty.</span>

8. timeoutWithPromise // call stack

**Step 2. Run all Microtasks**

9. log E // microtask queue
10. log E // from micro to call stack >> > console.log(E) // call stack
11. log F // microtask queue
    12 log F // from micro to call stack >> console.log(F) // call stack

**Step 3. Rerender**

**Step 4. Run a Task**

13. logB > console.log(B) // call stack

### Promise

**Создание** - конструктор new Promise с аргументом в виде cb, в которую передаются аргументами передаются функции resolve & reject.

```javascript
const myPromise = new Promise((resolve, reject) => {});
```

**Cостояние** - pending | fulfilled | rejected. Хранится в скрытом свойстве экземпляра `[[PromiseState]]`

**Подписка** - у экземпляра есть функции then, catch, finally для подписки на изменения состояния промиса

**Результат** - хранится в скрытом свойстве экземпляра `[[PromiseResult]]`. Передаётся в функции подписки:

`.then(data => { })`

`.catch(error => { })`

#### Статические методы:

**all**:

- возвращает другой promise, который зарезолвится когда ЗАРЕЗОЛВЯТСЯ ВСЕ промисы из его массива.
- если хотя бы один из [] rejected, то promise из all тоже rejected
- .then all сидит массив результатов всех промисов

**race**:

- отработает, когда первый promise из массива выполнится

**allSettled**:

- возвращает promise, который зарезолвится, когда все промисы из его массива уйдут из состояния pending (попадем в then, даже если некоторые зареджектятся)

#### Chains:

каждый then и catch возвращают новый промис. Catch как и then может вернуть fulfilled или rejected промис. 

`.then(data => Promise.reject() ).then().then()` - 2 и 3 промисы не будут испольнены

`.then(data => Promise.resolve() ).catch().then()` - catch не будет исполнен

`.then(data => Promise.reject() ).catch().then()` - все функции-подписчики будут исполнены

## Browser Javascript

### Terms

`removeEventListener("click", название функции)` -- нам нужно назвать функцию внутри, если мы хотим удалить

`event.target` - элемент, на котором событие возникло изначально

`event.currentTarget` - элемент, на котором обработчик события был назначен

**Фазы события: Погружение -- Цель - Всплытие**

### Всплытие (bubbling)

Когда кликаем на button внутри div, событие сработает сначала в button потом в div потом в body

Остановить можно `event.stopPropagation` в `addEventListener`

`event.stopImmediatePropagation` останавливает всплытие даже на соседние элементы (в одном родителе)

### Погружение (immersion)

```js
element.addEventListener(
  "click",
  (e) => {
    e.preventDefault();
  },
  { capture: true },
);
```

3-ий аргумент опциональный(либо просто true). Полезно, **если нужно выполнить событие сначала на родительском элементе**

### Делегирование событий(event delegation):

**Пример:**
допустим у нас 800к комментов и на каждый придется вешать свой обработчик события для лайка/дизлайка.

Вместо этого используется прием делегирования -
вешаем обработчик на родителя элементов и с помощью `if (event.target.tagName)` указываем где именно должен произойти клик, таким образом мы сэкономили кучу памяти.

## FP - Functional Programming

### КАРРИРОВАНИЕ (carrying)

[Example from closure](#closure):

```js
maxLengthCreator(10)("This is string from some input");
```

Это трансформация функций таким образом, чтобы они принимали аргументы не как `fun(a, b, c)`, а как `fun(a)(b)(c)`.

```js
const sum = (n) => (b) => b + n;
sum(1)(2); // 3
```

> sum is a HOF (High order function)
>
> similar conception exists in React - HOC (High order component)

## Popular tasks

### Мемоизация (кэширование)

```javascript
const add = (a, b) => a + b;

// HOF-мемоизатор
function memoize(func) {
  const cache = {};
  return function (...args) {
    // Формируем уникальный ключ для комбинации аргументов
    let keyForThisCall = JSON.stringify(args);
    if (cache[keyForThisCall]) {
      // Если результат уже в памяти
      return cache[keyForThisCall]; // возвращаем его
    } else {
      const result = func(args[0], args[1]); // Иначе считаем
      cache[keyForThisCall] = result; // и сохраняем в память
      return result;
    }
  };
}

const memoizedAdd = memoize(add);

console.log(memoizedAdd(2, 3)); // Складываем 2 и 3, результат 5
console.log(memoizedAdd(2, 3)); // Берем из памяти 2,3, результат 5
```

### Advanced, мемоизация с WeakMap/WeakSet <span id="weakmap-cache"/>

```js
const difficultCalculationsWithObject = (obj) => {
  return { ...obj };
};
// HOF-мемоизатор
function memoize(func) {
  const cache = new WeakMap();
  return function (...args) {
    // Уникальным ключом будет ссылка на объект переданный в аргументах
    const keyForThisCall = args[0];
    if (cache.has(keyForThisCall)) {
      const cachedResult = cache.get(keyForThisCall); // Если результат уже в памяти
      return cachedResult; // возвращаем его
    } else {
      let result = func(keyForThisCall); // Иначе считаем
      cache.set(keyForThisCall, result); // и сохраняем в память
      return result;
    }
  };
}

const memoizedFunc = memoize(difficultCalculationsWithObject);

let obj1 = { a: 1, b: 2 };

console.log(memoizedFunc(obj1)); // calculates 1st call
console.log(memoizedFunc(obj1)); // takes from cache 2nd
obj1 = {}; // overwrite the reference
// позже { a: 1, b: 2 } будет удалён из WeakMap cache и из памяти
```


JavaScript


## Type vs Interface

**Type** может быть примитивом, union или tuple (кортеж). Нельзя изменить после создания.

```typescript
// primitive
type Name = string;

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];
```

**Interface** описывает только объект, и **повторные объявления объединяются** ([declaration merging](#declaration-merging))

### Extension & Intersection

#### Intersection

```typescript
type Shape = { color: string };
type Circle = Shape & { role: string };
```

#### Extension

То же самое, только синтаксис ближе к ООП.

```typescript
interface Shape {
  color: string;
}
interface Circle extends Shape {
  radius: number;
}
```

### Implements

В `implements` можно вставить как type, так и interface.

```typescript
interface Point {
  x: number;
  y: number;
}
class SomePoint implements Point {
  x = 1;
  y = 2;
}

// same
type Point2 = {
  x: number;
  y: number;
};

class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}
```

### Declaration merging <span id="declaration-merging"/>

> Повторные объявления интерфейса объединяются.

В отличие от **type**, он не может быть изменён после создания.

```typescript
// Эти две декларации становятся:
// interface Point { x: number; y: number; }
interface Point {
  x: number;
}
interface Point {
  y: number;
}

const point: Point = { x: 1, y: 2 };
```

## Абстрактные классы

Это смесь interface и class: мы задаём абстрактные свойства и методы, которые должны быть реализованы
в классе-наследнике, как и в интерфейсе,

НО в этой конструкции также позволено писать общую для детей логику.
[link to OOP article](OOP#abstract-class)

## Generic type

Это динамическая <тип-переменная>, что-то вроде параметра функции,
которую можно использовать в декларации типов, повышая его реюзабельность.

```typescript
type ListResponse<T> = {
  count: number;
  next: string;
  previous: string;
  results: T[];
};
```

## Type Guards

1. Операторы `typeof` и `instanceof`:

```typescript
function fn(param: number | string | Date) {
  if (typeof param === "string") {
    param.slice();
  } else if (param instanceof Date) {
    param.getTime();
  }
}
```

2. Предикат `is`:
   Помогает TS лучше определять тип значения, которое проверяется функциями наподобие isString, isUser.

```typescript
const isAxiosError = (error: unknown | AxiosError): error is AxiosError => {
  return axios.isAxiosError(error);
};
```

3. Оператор `in`:
   проверяет, существует ли поле в объекте

```typescript
"house" in { name: "test", house: { parts: "roof" } }; // => true
"house" in { name: "test" }; // => false
```

## Utility Types

Это что-то вроде встроенных «функций» для манипулирования типами.
Например: Partial, Pick, Omit, ReturnType, ReadOnly<PropsType> и т.д.


TypeScript


# React

## React и чистый JavaScript:

- Код на React более читаем (JSX = JS + HTML в одном файле)
- Компоненты
- JS императивный (буквально даёшь пошаговые инструкции)
- React декларативный (описываешь, что именно хочешь получить)

```javascript
// Императивный подход
const element = document.createElement("p");
element.textContent = "example";
element.className = "styles";
element.addEventListener("click", function () {});
// Декларативный
<p className="styles" onClick={function () {}}>
  example
</p>;
```

## Виртуальный DOM

- Виртуальный DOM представляет собой упрощённые объекты JavaScript по сравнению с настоящим DOM.

## Сверка (Reconciliation)

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

## Базовые хуки

### useState

- Локальное состояние
- Сравнивает предыдущие значения с новыми и при необходимости вызывает повторный рендер тех частей UI, которые от него зависят (в отличие от обычной переменной, которую мы вывели бы в JSX и изменили в обработчике события)
- правильное изменение состояния `setState(prev => prev + 1)`
- `useState(() => compute())` — можно передать функцию в качестве начального значения, чтобы вычислить его один раз, а не при каждом рендере

### useRef

- Можно использовать как useState, но **изменение не вызывает повторный рендер**
- Также может хранить ссылку на DOM-элемент

### useContext

- Нужен для избежания **props drilling**, когда приходится пробрасывать состояние через пропсы каждого уровня, даже там, где оно не нужно
- Подходит для небольшого глобального состояния; для сложных сценариев используют менеджеры состояния (Redux, Zustand, React Query и т.д.)


### useCallback <span id="useCallback"></span>

1. Используется вместе с [React.memo](#React.memo) для функций, передаваемых в дочерний компонент, чтобы между рендерами родителя сохранялась та же ссылка.

### useMemo <span id="useMemo"></span>

Сценарии использования:

1. Аналогично useCallback, в дополнение к [React.memo](#React.memo), но для объектов, массивов и т.д.
2. Когда одно из состояний сложно вычисляется, а мы изменяем другое состояние, при ререндере сложное состояние пересчитывается снова.

```javascript
function formatData() {
  return data.map((item) => {
    // сложные вычисления (форматирование, сортировка, фильтрация)
  });
}
const formattedData = useMemo(formatData, [data]);
```

## Оптимизация

### Атрибут `key`

- Нужен для оптимизации обновления списка элементов, созданного с помощью метода `map`.
- Если мы добавляем новый элемент в начало или середину массива,
  React с `key` сможет корректно сопоставить существующие элементы и обновить **только изменённые**,
  избегая полной перерисовки всех элементов.
- Не рекомендуется использовать индекс массива, если список динамичный (удаление элемента из середины массива, будет рассмотрено Реактом так, будто удалился последний элемент массив, а все остальные элементы после реально удаленного изменились)

### React.lazy

- Нужен, когда не хотим, чтобы компонент попадал в начальный бандл (собранный файл из всех файлов проекта).
- Начальная загрузка будет быстрее (бандл меньше), но пользователь будет ждать, когда компонент подгрузится.
- Такой компонент следует оборачивать в `React.Suspense` и указывать загрузчик в `fallback` (бандл делится на чанки).

### Profiler

- Компонент для измерения времени рендеринга
- Оборачиваем часть дерева в `<Profiler id="name" onRender={callback}>`
- Подробный анализ доступен во вкладке **Profiler** в React DevTools

### Оптимизация повторных рендеров дочерних компонентов

- Без PureComponent / shouldComponentUpdate / React.memo **компоненты перерисовываются каждый раз при ререндере родителя независимо от изменения пропсов.**

```javascript
// UserName будет перерисовываться каждый раз при клике на кнопку
<>
  <button onClick={() => setState((prev) => prev + 1)}>Add</button>
  <UserName name="John Doe" />
</>
```

#### PureComponent

- При наследовании от `PureComponent` сравниваются новые и старые props и state, предотвращая ререндер, если они одинаковые.

#### shouldComponentUpdate(nextProps, nextState)

- Делает то же, но в этом методе жизненного цикла можно реализовать **пользовательскую логику сравнения** props и state.

#### HOC React.memo

- Делает то же для функциональных компонентов и только для props.
- Предотвращает ререндер, когда props не изменились.

```javascript
// не будет перерисовываться при рендере родителя, только при изменении props.name
const UserName = React.memo((props) => {
  return <div>{props.name}</div>;
});
```

- <span id="React.memo" style="color:red;font-size:25px;">!!!</span> React.memo / PureComponent делают **только поверхностную проверку** (примитивы и ссылки).
- Когда в пропс передан не примитивный тип, дополнительно к React.memo
  данные нужно обернуть в [useMemo](#useMemo) / [useCallback](#useCallback).
- Использование этих хуков сохраняет ссылки на функции и объекты между рендерами, предотвращая лишние перерисовки.

```javascript
const user = useMemo(() => ({ name: "John Doe" }), []);
const handleClick = useCallback(() => setState((prev) => prev + 1), []);
return (
  <>
    <UserName user={user} />
    <button onClick={handleClick}>Add</button>
  </>
);
```

## Продвинутые хуки

### useLayoutEffect

- Применяется, когда нужно напрямую изменить стили в DOM-дереве (`ref.current.style.border = "1px solid black"`)
- и хотим, чтобы они применились **до отрисовки — синхронно**, а не после рендера, как в обычном useEffect.

### useImperativeHandle

- Нужен, когда из родительского компонента, например, нужно очистить поля, привязанные к локальному состоянию дочернего.
- Через `forwardRef` в дочернем компоненте раскрываются методы, которые доступны только внутри него, а в родительском их можно вызвать через ссылку.

### useTransition

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

```javascript
const [input, setInput] = useState("");
const [list, setList] = useState([]);
const [isPending, startTransition] = useTransition();

function handleChange(e) {
  setInput(e.target.value); // устанавливаем приоритетное состояние
  startTransition(() => {
    const filteredValue = data.filter((item) => item); // тяжёлые вычисления фильтрации
    setList(filteredValue); // состояние с меньшим приоритетом внутри startTransition
  });
}
```

## Чего нет в React из коробки

- Маршрутизация (React Router, Next.js)
- Глобальное состояние (Redux, MobX, Zustand)
- Data fetching и кеширование (fetch/axios, React Query, SWR)
- Управление формами (React Hook Form, Formik)
- i18n и локализация (react-i18next)

## Техники в React

### Порталы
- Позволяют рендерить дочерний компонент вне иерархии родителя в DOM.
- Используется, например, для модальных окон, тултипов и всплывающих меню.
- Работает через ReactDOM.createPortal(children, container).
```javascript
const portalTargetElement = document.getElementById("portal-root")
return ReactDOM.createPortal(
    <div className="modal">Hello!</div>, portalTargetElement
);
```

### Error Boundary
- Реализуются только на классовых компонентах (componentDidCatch и getDerivedStateFromError).

# Важные библиотеки, связанные с React

## React-router-dom V6
- Основные компоненты и хуки: <BrowserRouter> <Routes> и <Route> useNavigate, useParams, useLocation
- Поддержка динамических маршрутов (/user/:id).
- В версиях 6.4+ роутер поддерживает загрузку данных через `loader` и отправку через `action`

## Redux

- Redux хранит состояние объектов в едином store
- Чтобы изменить состояние, нужно отправить action; action попадает в reducer, reducer описывает, как изменится state
- Изменения происходят только с помощью **чистой** функции reducer — создаются копии и подменяются
- ACTION — простой объект { type, payload }
- Методы `dispatch(action)`, `getState()`, `subscribe(listener)` принадлежат store (`store.dispatch`)
- mstp выбирает нужную для компонента часть state и отслеживает изменения в выбранных свойствах
- FLOW — dispatch(action) -> reducer(current state, action) -> возвращается новый экземпляр state

## Redux-toolkit

- Не используем ActionCreators
- Используем `ThunkCreator.fulfilled/rejected` для успешных/неуспешных случаев санок
- Настраиваем санки не на диспатч нужного AC, а на возврат данных/rejectedWithValue(error)

## Redux-thunk

- Middleware для Redux, позволяющий диспатчить асинхронные функции (thunks)
- Thunk это частный случай HOF (отложенное вычисление)
- Диспатч может принимать не только объект action, но и функцию (dispatch, getState) => {}.
- Через это можно делать асинхронные запросы (fetch/axios), а результат уже диспатчить как обычный action.

## React-query

- Позволяет кэшировать запросы на уровне клиента.
- Автоматически повторяет запросы при ошибке или восстановлении сети.
- Снимает необходимость вручную писать loading/error/success стейты.

## MobX

- Менеджер состояния на основе `observable` значений
- Компоненты автоматически реагируют на изменения; меньше шаблонного кода по сравнению с Redux
- ООП стиль (observable, классы для сторов, мутабельный стейт)


Hi, I'm Michael!

Featured Posts

Объектно-ориентированное программирование и OOP в JavaScript

JavaScript

TypeScript

React.js