В чем заключается суть оптимизации скорости обновления компонентов через useReducer?

Question

[MishaXXL]

Наткнулся случайно на обсуждение вопроса, что оптимизация реакт компонента обыгрывается через замену useState на использование useReducer
За счет чего получается выгода в скорости и как это работает под капотом?

В файле react.development.js
Наткнулся на

function useReducer(reducer, initialArg, init) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useReducer(reducer, initialArg, init);
}

Где пошел последу

function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;

  {
    if (dispatcher === null) {
      error('Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' + ' one of the following reasons:\n' + '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' + '2. You might be breaking the Rules of Hooks\n' + '3. You might have more than one copy of React in the same app\n' + 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.');
    }
  } 


  return dispatcher;
}

Еще чуть дальше

var ReactCurrentDispatcher = {
  current: null
};

И получилось, что в resolveDispatcherнаш dispatcherравен null

Почему мои поиски в попытках найти логику хука провалились и как выйти на след логики useReducer?
Ведь в этом файле мы экспортируем наш useReducer в мир
В поисках совпадений по словам почему-то больше файлов с именами useReducerне выдало

Comments

[Алексей Уколов]

Наткнулся случайно на обсуждение вопроса, что оптимизация реакт компонента обыгрывается через замену useState на использование useReducer

Дайте ссылку на это бредовое обсуждение.

И получилось, что в resolveDispatcher наш dispatcher равен null

Нет, не получается. Он может быть равен null, но не равен ему всегда. Ищите места, где идёт присваивание в ReactCurrentDispatcher.current.

[Kentavr16]

Алексей Уколов, скорее всего это про оптимизацию в логике компонента при использовании редьюсера вместо сложного объекта стейта/нескольких юзстейт, а не про скорость.

[MishaXXL]

Алексей Уколов, там речь шла о том, что под капотом у useState находится useReducer и что некоторые компоненты эффективней ререндерить через редьюсер

[MishaXXL]

Kentavr16, а что подразумевают под вопросом, когда речь идет об оптимизации и ускорении реакт компонетов?

Answer 1

[Алексей Уколов]

Почему мои поиски в попытках найти логику хука провалились

Кто ж вас знает ¯\_(ツ)_/¯

как выйти на след

Я поиском по репе на Гитхабе воспользовался: https://github.com/facebook/react/blob/6f18664b82b...

Comments

[MishaXXL]

Нашел ссылку )
https://stackoverflow.com/questions/54646553/usest...

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

О чем здесь идет речь?

[Алексей Уколов]

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

Как и говорил Kentavr16, здесь речь о том, что сложную логику проще писать через useReducer. Никакой скорости тут нет.

useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

Тут речь о том, что если передавать колбэки не оборачивая их в useCallback (т.е. создавая новый экземпляр функции каждый раз), будут лишние ререндеры всех компонентов между родительским с логикой и глубоко вложенным дочерним, где реально нужно что-то изменить. Но гораздо важнее то, что передавать так колбэки тупо многословнее - лишний код, неудобно. Написанное - редкий сценарий и из него ни в коем случае нельзя делать вывод "useReducer производительнее useState".

Ну и важно, что в ответе есть ссылка на документацию, где вы можете увидеть две вещи: то, что эта документация устарела и ссылку на более детальный разбор. А ещё там же можно выйти на разбор этого вопроса в актуальной версии документации.