Значение состояния изменяется немедленно и компонент перерисовывается.

Значение состояния изменяется немедленно, но компонент перерисовывается позже.

Значение состояния изменяется после следующего рендеринга компонента.

Ничего не происходит, если новое значение состояния равно старому.

setState(prevState => prevState + 1);

setState(state + 1);

setState(() => prevState + 1);

setState(prevState => state + 1);

Происходит синхронное обновление состояния и рендер компонента

Состояние обновляется, но компонент не перерендеривается

Значение состояния ставится в очередь для обновления, и компонент ставится в очередь для повторного рендеринга

Ничего не происходит

Да, только асинхронные функции

Нет, только синхронные функции

Да, и синхронные, и асинхронные функции

Нет, функция setState не принимает функции вообще

Во время рендеринга компонента

После монтирования компонента

Перед монтированием компонента

При обновлении состояния компонента

Использовать условные конструкции внутри эффекта

Передать вторым аргументом массив зависимостей

Передать массив зависимостей в качестве первого аргумента

Использовать контекст для управления вызовом эффекта

Вернуть функцию, которая выполнит очистку

Вернуть функцию, которая выполнит очистку

Вызвать функцию useRef с пустым объектом

Использовать отдельный хук useCleanup

Эффект вызовется при монтировании и размонтировании компонента

Эффект не будет вызываться

Эффект будет вызываться при каждом рендере компонента

Эффект будет вызываться только при монтировании компонента

useEffect(() => { document.title = title; });

useEffect(() => { setTitle(title); }, [title]);

useEffect(title => { document.title = title; }, []);

useEffect(() => { document.title = title; }, [title]);

Библиотека для управления состоянием компонентов

Инструмент для отслеживания изменений состояния компонентов

Серверное решение для хранения состояний компонентов

Расширение для браузера, которое помогает управлять состоянием компонентов

Ускорение работы приложения

Упрощение структуры компонентов

Централизация управления состоянием и облегчение работы с данными

Создание модульной архитектуры приложения

Двунаправленный поток данных

Модульная архитектура

Однонаправленный поток данных

Иерархическое хранение состояния

Store, Reducers, Actions, Selectors

Store, Reducers, Actions, Middleware

Store, Reducers, Actions, Components

Store, Reducers, Actions, Dispatchers

Изменить состояние напрямую в хранилище

Вызвать функцию setState() из компонента

Отправить действие (action) и обработать его в редьюсере

Использовать хук useEffect для обновления состояния

state.page = action.page;

return { ...state, page: action.page };

state = { ...state, page: action.page };

return Object.assign({}, state, { page: action.page });

Используя хук useDispatch из библиотеки react-redux

Используя хук useState и передав функцию dispatch

Вызывая функцию dispatch напрямую из компонента

Используя функцию connect из библиотеки react-redux

Хук для оптимизации рендеринга компонента при изменении состояния

Хук для мемоизации результатов вычислений

Хук для контроля вызова побочных эффектов

Хук для управления состоянием компонента

useMemo(() => expensiveCalculation, [value]);

useMemo(expensiveCalculation(value), [value]);

useMemo(() => expensiveCalculation(value), [value]);

Результат будет пересчитываться при каждом рендере компонента

Результат будет пересчитываться только при изменении значения value

Результат никогда не будет пересчитываться

useMemo вызовет ошибку

const data = useMemo(items.map((item) => <ListItem key={item.id} {...item} />), [items]);

const data = useMemo(() => items.map((item) => <ListItem key={item.id} {...item} />));

const data = useMemo(() => items.map((item) => <ListItem key={item.id} {...item} />), [items]);

Результат будет мемоизирован

useMemo будет игнорировать аргумент и вызываться при каждом рендере

useMemo вызовет ошибку

Результат будет пересчитываться при каждом рендере компонента

Если нужно передать колбэк, зависящий от контекста, оптимизированному дочернему компоненту

Если нужно передать колбэк для изменения значения контекста

Если нужно мемоизировать результат вычисления, зависящий от контекста

Если нужно определить функцию, которая вызывается при изменении контекста

const theme = ThemeContext(useContext);

const theme = useContext(ThemeContext);

const theme = useContext(() => ThemeContext);

const [theme] = useContext(ThemeContext);

Для мемоизации колбэков, которые изменяются только при изменении зависимостей

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

Для определения функций, которые вызываются при изменении состояния компонента

Для мемоизации результатов вычислений

const memoizedHandleClick = useCallback(() => handleClick(someValue), [someValue]);

const memoizedHandleClick = useCallback(() => handleClick, [someValue])

const memoizedHandleClick = useCallback(handleClick(someValue), [someValue]);

Для мемоизации результатов вычислений

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

Для определения функций, которые вызываются при изменении состояния компонента

Для мемоизации колбэков, которые изменяются только при изменении зависимостей

Процесс отрисовки компонентов на странице

Алгоритм для определения изменений между двумя деревьями элементов

Процесс передачи данных между компонентами

Технология, используемая для оптимизации работы с DOM

Оптимизирует процесс работы с DOM, просчитывая только необходимые изменения

Создает копию реального DOM для ускорения работы с элементами

Отвечает за отрисовку компонентов в браузере

Сохраняет состояние компонентов при изменении дерева элементов

Обновляет только те компоненты, которые имеют изменения в своих пропсах

Изменяет состояние компонентов напрямую, минуя Virtual DOM

Сбрасывает все состояния компонентов и заново инициализирует их

Создает новое дерево элементов и сравнивает его с предыдущим деревом, чтобы определить необходимые изменения

Новое дерево элементов генерируется и сравнивается с предыдущим деревом для определения необходимых изменений

Все компоненты в приложении перерисовываются без учета изменений

Компоненты с измененным состоянием удаляются из DOM и создаются заново

Все компоненты с измененным состоянием мгновенно обновляются в реальном DOM

Сравнивает только компоненты с измененными пропсами

Использует ключи (keys) для быстрого сравнения компонентов одного уровня

Использует хеш-функции для определения необходимости обновления компонентов

Опирается на глубокое сравнение всех элементов деревьев

Ключи определяют порядок элементов в списке и контролируют их отображение

Ключи позволяют React оптимизировать обработку событий, связанных с элементами списка

Ключи помогают React определить измененные, добавленные или удаленные элементы списка для оптимизации процесса Reconciliation

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

Использовать оператор if-else внутри JSX

Использовать тернарный оператор внутри JSX

Использовать оператор switch внутри JSX

Создать отдельные компоненты для каждого условия и рендерить их в зависимости от условия

Использовать useEffect с массивом зависимостей, содержащим только объект user

Использовать useEffect с пустым массивом зависимостей, чтобы отслеживать изменения только при монтировании компонента

Использовать useEffect с массивом зависимостей, содержащим поле user.name

Использовать useEffect без массива зависимостей, чтобы отслеживать изменения при каждом рендере компонента

Создать ссылку с помощью React.createRef() и использовать её в качестве значения атрибута ref

Создать ссылку с помощью хука useRef() и использовать её в качестве значения атрибута ref

Использовать атрибут id для каждого DOM-элемента и обращаться к нему с помощью document.getElementById()

componentDidMount

componentDidUpdate

componentWillMount

componentWillUnmount

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentDidMount

componentWillMount

componentWillUpdate

componentDidMount

componentDidUpdate