React

Question 1

Fiber

Answer 1

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

Добавляет Split work, Prioritization, Scheduling

60 FPS. На 1 рендер у нас есть 16 мс, но по факту значение 10, поскольку 6 мс, браузер резервирует на отрисовку и на свои внутрение механизмы

RAIL - это набор рекомендаций, предложенных Google для обеспечения хорошей производительности веб-приложений, включая соблюдение времени отклика в 100 миллисекунд для действий пользователя (Response), достижение 60 кадров в секунду для анимации (Animation)

Раньше процесс назывался stack rendering, тогда механизм реконциляции сравнивал 2 дерева Virtual DOM, находил diff и вносил изменения 1 большим синхронным апдейтом, при наличии большого количества компонентов, это негативно влияло на производительность.

Теперь же процесс называется work loop. Если проихошло какое либо действие которое приводит к апдейту, планировщик у реакта смиотрит на приоритет апдейтов и делает для первого апдейта новый виртуал дом, сравнивает , получает дифф и делает коммит. И так повторяется до тех пор пока реакт не поймет что время вышло и в текущем кадре уже ничего не успеет. В следующем кажре процесс вопторяется

SynchronousPriority:1
TaskPriority: 2
AnimationPriority: 3
HighPriority: 4
LowPriority: 5
OffscreenPriority: 6

По факту файбер это простой объект, и у каждого компонента есть свой файбер. который знает о нем всё - пропсы, стейт и т.д.

Question 2

useDebugValue

Answer 2

Предназначен чтобы в консоли разработчика React отображать информацию из кастомного хука

function useOnlineStatus() {
// …
useDebugValue(isOnline ? ‘Online’ : ‘Offline’);
// …
}

Question 3

useId

Answer 3

Позволяет генерировать случайный ID для accessibility аттрибутов, например для связки label и инпутов

Question 4

useLayoutEffect

Answer 4

Это тот же useEffect, но работает синхронно и запускается перед тем как браузере перерисует экран

Question 5

useSyncExternalStore

Answer 5

Хук как прпавило используют для разработки библиотек, но есть и другие способы его использования.

Подписка на внешний стор

Подписка на API браузера
Например, предположим, что вы хотите, чтобы ваш компонент отображал, активно ли сетевое соединение. Браузер предоставляет эту информацию через свойство navigator.onLine.
Это значение может меняться без ведома React, поэтому вы должны считывать его с помощью useSyncExternalStore.

Question 6

useInsertionEffect

Answer 6

Хук для разработчиков CSS-in-JS пакетов

Позволяет вставлять элементы в DOM до того, как сработают какие-либо лэйаут эффекты.

Question 7

useTransition и useDeferredValue

Answer 7

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

Для сет стейта
const [isPending, startTransition] = useTransition();

Если нет доступа к сет стейту, а только к пропсам
const deferredResults = useDeferredValue(results);

Question 8

useImperativeHandle

Answer 8

Позволяет пользоваться методами из дочерних компонентов в родительском, путем прикрепления к рефу. Используется только c forwardRef()

import { forwardRef, useImperativeHandle } from “react”;

function Child(props, ref) {
const doSomething = () => {
console.log(“do something”);
};

useImperativeHandle(ref, () => ({ doSomething }));

return (
<div>
<h1>Child Component</h1>
<button onClick={doSomething}>Run</button>
</div>
);
}

export default forwardRef(Child); // Child обернут в forwardRef

А уже из родительсого компонента мы просто используем
childRef.current.doSomething();

Question 9

forwardRef

Answer 9

Позволяет передавать ref дочерним компонентам

Question 10

useCallback

Answer 10

Позволяет мемоизировать функцию, так как она создается при каждом рендере, и если ее передавать в дочерние компоненты, то с помощью useCallback можно избежать повторного ререндера дочернего компонента когда ререндерится родительский