Optimization

Question 1

Как работает компонент Suspense?

Answer 1

Компонент Suspense позволяет отобразить fallback-компонент до момента полной отрисовки своих дочерних компонентов.
~~~
<Suspense fallback={<Loading></Loading>}>

<SomeComponent></SomeComponent>

</Suspense>
~~~
Суть Suspense заключается в обработке состояний получения suspended-данных. На данный момент suspended-данные отправляют приложения, основанные на NextJS и Relay, а также lazy-компоненты и данные, обрабатываемые через хук use, обрабатывающий промис.

Question 2

Зачем нужен метод React.memo?

Question 3

Зачем нужен компонент React.Profiler?

Question 4

Как обработать ошибки в процессе отрисовки?

Answer 4

Возможно создание компонента-обработчика ошибок с помощью методов жиненного цикла:
1. Метод getDerivedStateFromError(error) => nextState позволяет изменить состояние компонента для отрисовки fallback-компонента
2. Метод componentDidCatch позволяет создавать побочные эффекты для логирования ошибок

Question 5

Как работает строгий режим?

Answer 5

Строгий режим - это компонент React.StrictMode, который позвляет выявить следующие проблемы в дереве:
1. Применение небезопасных UNSAFE-методов жизненного цикла
2. Применение устаревшего контекста, который отсутствует в версии 17+
3. Применение устаревшего строкового ref, который обладает неочевидным поведением
4. Применение findDOMNode, который позволяет найти узел только в момент запроса, но не позволяет отследить его изменение
5. Обнаружение неожиданных побочных эффектов. React вызовет методы жизненного цикла, которые должны быть чистыми функциями: constructor, getDerivedStateFromProps, shouldComponentUpdate, тело функционального компонента, render, setState колбек, хуки useStatem useMemo и useReducer
6. Обеспечение возобновляемого состояния для случаев, когда React решит перемонтировать компонент для оптимизации. React имитирует разрушение и пересоздание эффектов на смонтированном компоненте

Question 6

Для чего применяется useTransition?

Answer 6

Хук useTransition позволяет осуществлять фоновую отрисовку при изменении состояния React-приложения.
Фоновая отрисовка может быть отменена изменением состояния.
~~~
function TabContainer() {
const [isPending, startTransition] = useTransition();
const [tab, setTab] = useState(‘about’);

function selectTab(nextTab) {
startTransition(() => {
setTab(nextTab);
});
}
// …
}
~~~
useTransition работает совместно с Suspense.

Question 7

Дл чего применяется useDefferedValue?

Answer 7

Хук useDefferedValue применяется для создания значения, которое позволяет React отложить отрисовку для оптимизации.
Значение должно быть примитивом или внешним объектом.
React сначала отрисует компонент со старым значением, затем фоново произведет отрисовку с новым значением и применит изменения к DOM. Если значение изменилось перед применением изменений к DOM, то он заново фоново произведет отрисовку.
Если пользователь будет произодить значимые изменения, например, ввод данных, то отрисова в фоне будет отложена.
Эффекты, зависимые от отложенного значения, применятся только при применении изменений к DOM.

Question 8

Для чего применяется useDebugValue?

Answer 8

Хук useDebugValue применяется для отслеживания значения кастомного хука через DevTools.
Первый аргумент - значение.
Второй аргумент - функция-форматтер значения для вывода.

Question 9

Для чего применяется метод React.lazy?

Question 10

Для чего применяется метод React.startTransition?

Question 11

Как работает fiber?