
## Concepts

1. Abstraction
2. Encapsulation
3. Inheritance
4. Polymorphism

### Abstraction

Abstraction allows us to focus on **what** an object does rather than **how** it does it.

#### In TypeScript, **abstract classes** are implemented with the `abstract` keyword. <span id="abstract-class"/>

You cannot create an instance from an abstract class.
In Revuud, for example, `User` is an abstract class, while `Talent` and `Admin` are concrete implementations.

The goal is to avoid duplicating code.

[link to abstract class example](#abstract-class-example)

### Encapsulation

This is the separation of interfaces into internal and external ones—private and public properties/methods.

The goal is to prevent external users from changing the internal interface so nothing breaks from the outside.

There is a convention to prefix private properties with `_`.
At the language level, privacy is implemented with the `#` symbol:

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

### Inheritance

Class inheritance extends one class with another.

The goal is to avoid duplicating code and save memory by building on existing functionality.

### Polymorphism

It is the ability to call the same method on different objects, and each object responds differently.
To achieve this, polymorphism relies on inheritance.

### Example demonstrating all 4 concepts <span id="abstract-class-example"/>

```typescript
abstract class User {
  abstract firstName: string;
  abstract lastName: string;
  abstract sendInvite(): void; //! 1. abstraction principle (declaration without implementation)

  get fullName() {
    // non-abstract method with logic
    return this.firstName + this.lastName; // unlike an interface, logic can be written here
  }
}

new User(); // Error, can't create an instance from an abstract class

class Admin extends User {
  //! 3. inheritance principle (extending a concrete class from an abstract base)
  firstName;
  lastName;

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

  get fullName() {
    //! 4. polymorphism principle (override parent `fullName` getter so it behaves differently)
    return this.firstName + " last name is NDA for admins";
  }
  sendInvite() {
    //! 4. polymorphism principle (implement the abstract method differently in two child classes)
    const author = this.fullName;
    alert({ type: "admin", author }); // fake send function
  }
}

class Talent extends User {
  //! 3. inheritance principle (extending a concrete class from an abstract base)
  firstName;
  lastName;

  #age: number; //2. encapsulation (private field)

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

    this.#age = age;
  }
  sendInvite() {
    //! 4. polymorphism principle (implement the abstract method differently in two child classes)
    const author = super.fullName; //! 3. inheritance, calling the parent class getter
    alert({ type: "talent", author }); // fake send function
  }
}

const john = new Talent("John", "Smith", 30);
//! 2. encapsulation (the private field isn't accessible outside the Talent class)
john.#age; // SyntaxError
```


Object-Oriented Programming and OOP in 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 - поднятие

Declarations are hoisted: `var` declarations are lifted and initialized with `undefined`, while function declarations are hoisted together with their implementation

**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** can be a primitive, a union, or a tuple. It cannot be changed after creation

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

// union
type PartialPoint = PartialPointX | PartialPointY;

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

**Interface** only describes an object, and **repeated declarations are merged** ([declaration merging](#declaration-merging))

### Extension & Intersection

#### Intersection

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

#### Extension

Same as intersection, but the syntax is closer to OOP

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

### Implements

Both type and interface can be used in implements

```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"/>

> Repeated interface declarations are merged

Unlike a **type**, it cannot be changed after creation

```typescript
// These two declarations become:
// interface Point { x: number; y: number; }
interface Point {
  x: number;
}
interface Point {
  y: number;
}

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

## Abstract classes

It's a mixture of interface and class: we declare abstract properties and methods that must be implemented
in the derived class, like in an interface,

BUT this construct also allows writing shared logic for children.
[link to OOP article](OOP#abstract-class)

## Generic type

This is a dynamic <type-variable>, similar to a function parameter,
which can be used in type declarations, increasing reusability

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

## Type Guards

1. `typeof` & `instanceof` operators:

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

2. Predicate `is`:
   Helps TypeScript better determine the type of a value that is checked by functions like isString, isUser

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

3. `in` operator:
   checks if field exists in object

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

## Utility Types

These are like built-in "functions" for manipulating types.
For example: Partial, Pick, Omit, ReturnType, ReadOnly<PropsType>, etc.


TypeScript


# React

## React and plain JavaScript

- React code is more readable (JSX = JS + HTML in one file)
- Components
- JS is imperative (you literally give step-by-step instructions)
- React is declarative (you describe what you want to get)

```javascript
// Imperative approach
const element = document.createElement("p");
element.textContent = "example";
element.className = "styles";
element.addEventListener("click", function () {});
// Declarative
<p className="styles" onClick={function () {}}>
  example
</p>;
```

## Virtual DOM

- The virtual DOM is a set of simplified JavaScript objects compared to the real DOM.

## Reconciliation

- The process of comparing old and new versions (snapshots) of the virtual DOM after data changes (for example, an array used to render a list).
- Based on this comparison, React makes targeted changes to the real DOM.
- As a result, the user sees only the updated list item rather than the entire list being re-rendered.

## Basic hooks

### useState

- Local state.
- Compares previous values with new ones and, when necessary, re-renders the parts of the UI that depend on it (unlike a regular variable rendered in JSX and changed in an event handler).
- Correct state update: `setState(prev => prev + 1)`
- `useState(() => compute())` — pass a function as the initial value to compute it once instead of on every render.

### useRef

- Can be used like useState, but **changing it does not trigger a re-render**.
- Can also store a reference to a DOM element.

### useContext

- Needed to avoid **props drilling**, when state has to be passed through props at every level even where it isn’t needed.
- Suitable for small global state; for complex scenarios use state managers (Redux, Zustand, React Query, etc.)

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

1. Used with [React.memo](#React.memo) for functions passed to a child component so the same reference is kept between parent renders.

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

Use cases:

1. Similar to useCallback, in addition to [React.memo](#React.memo), but for objects, arrays, etc.
2. When one piece of state is expensive to compute and we change another state, on re-render the expensive state is recomputed again.

```javascript
function formatData() {
  return data.map((item) => {
    // complex computations (formatting, sorting, filtering)
  });
}
const formattedData = useMemo(formatData, [data]);
```

## Optimization

### `key` attribute

- Needed to optimize updating a list of elements created with `map`.
- If we add a new element at the start or middle of the array,
  React with `key` can correctly match existing elements and update **only the changed ones**,
  avoiding a full re-render of all elements.
- It's not recommended to use an array index if the list is dynamic (removing an element from the middle would be seen as removing the last element, and React would treat the rest as changed).

### React.lazy

- Useful when we don't want a component to go into the initial bundle (the file built from all project files).
- The initial load will be faster (smaller bundle), but the user will wait for the component to load.
- Such a component should be wrapped in `React.Suspense` and a loader specified in `fallback` (the bundle is split into chunks).

### Profiler

- Component for measuring render time.
- Wrap part of the tree in `<Profiler id="name" onRender={callback}>`.
- Detailed analysis is available in the **Profiler** tab in React DevTools.

### Optimizing child component re-renders

- Without PureComponent / shouldComponentUpdate / React.memo **components re-render every time the parent re-renders regardless of prop changes.**

```javascript
// UserName will re-render every time the button is clicked
<>
  <button onClick={() => setState((prev) => prev + 1)}>Add</button>
  <UserName name="John Doe" />
</>
```

#### PureComponent

- Extending from `PureComponent` compares new and old props and state, preventing re-renders when they are the same.

#### shouldComponentUpdate(nextProps, nextState)

- Provides the same optimization, but this lifecycle method allows **custom comparison logic** for props and state.

#### HOC React.memo

- Offers the same optimization for functional components and only for props.
- Prevents re-renders when props remain the same.

```javascript
// will not re-render when the parent renders, only when props.name changes
const UserName = React.memo((props) => {
  return <div>{props.name}</div>;
});
```

- <span id="React.memo" style="color:red;font-size:25px;">!!!</span> React.memo / PureComponent do **only a shallow comparison** (primitives and references).
- When a non-primitive type is passed via props, in addition to React.memo
  wrap the data in [useMemo](#useMemo) / [useCallback](#useCallback).
- Using these hooks preserves references to functions and objects between renders, preventing extra re-renders.

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

## Advanced hooks

### useLayoutEffect

- Used when you need to directly modify styles in the DOM tree (`ref.current.style.border = "1px solid black"`)
- and you want them applied **before paint—synchronously**, not after render like with regular useEffect.

### useImperativeHandle

- Useful when, from the parent component, you need to clear fields tied to the child's local state, for example.
- Through `forwardRef`, the child exposes methods available only inside it, and the parent can call them via the ref.

### useTransition

- Used when heavy re-rendering impacts page responsiveness.
- It helps prioritize states that affect responsiveness (text input, switching tabs, timeline).
- And lower the priority of state that blocks the UI (rendering filtered list results, switching tab content).

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

function handleChange(e) {
  setInput(e.target.value); // set high-priority state
  startTransition(() => {
    const filteredValue = data.filter((item) => item); // heavy filtering calculations
    setList(filteredValue); // lower-priority state inside startTransition
  });
}
```

## What React doesn't include out of the box

- Routing (React Router, Next.js)
- Global state (Redux, MobX, Zustand)
- Data fetching and caching (fetch/axios, React Query, SWR)
- Form management (React Hook Form, Formik)
- i18n and localization (react-i18next)

## Techniques in React

### Portals

- Allow rendering a child component outside the parent's DOM hierarchy.
- Used for modals, tooltips, and pop-up menus.
- Works via `ReactDOM.createPortal(children, container)`.

```javascript
const portalTargetElement = document.getElementById("portal-root");
return ReactDOM.createPortal(
  <div className="modal">Hello!</div>,
  portalTargetElement,
);
```

### Error Boundary

- Implemented only with class components (`componentDidCatch` and `getDerivedStateFromError`).

# Important libraries related to React

## React-router-dom v6

- Core components and hooks: `<BrowserRouter>`, `<Routes>` and `<Route>`, `useNavigate`, `useParams`, `useLocation`
- Supports dynamic routes (`/user/:id`).
- In versions 6.4+ the router can load data via `loader` and submit via `action`.

## Redux

- Redux stores the state of objects in a single store
- To change the state, you send an action; the action goes to a reducer, which describes how the state changes
- Changes happen only through a **pure** reducer function—copies are created and swapped
- ACTION — plain object { type, payload }
- Methods `dispatch(action)`, `getState()`, `subscribe(listener)` belong to the store (`store.dispatch`)
- mstp selects the part of the state needed for a component and tracks changes in the selected properties
- FLOW — dispatch(action) -> reducer(current state, action) -> new state instance is returned

## Redux-toolkit

- No ActionCreators
- Use `ThunkCreator.fulfilled/rejected` for successful/unsuccessful thunk cases
- Configure thunks not to dispatch a specific AC but to return data/rejectedWithValue(error)

## Redux-thunk

- Middleware for Redux that allows dispatching asynchronous functions (thunks)
- A thunk is a particular case of an HOF (deferred computation)
- Dispatch can accept not only an action object but also a function `(dispatch, getState) => {}`
- This allows making async requests (fetch/axios) and dispatching the result as a regular action.

## React-query

- Allows caching requests on the client.
- Automatically retries requests on failure or when the network is restored.
- Removes the need to manually write loading/error/success states.

## MobX

- State manager based on `observable` values
- Components react to changes automatically; less boilerplate compared to Redux
- OOP style (observables, store classes, mutable state)


Hi, I'm Michael!

Featured Posts

Object-Oriented Programming and OOP in JavaScript

JavaScript

TypeScript

React.js