UseSelector: Почему компонент рендерится дважды?

Question

[G F]

Начал писать проект на реакт + редакс с сагами и заметил что при использовании хука UseSelector компонент ре-рендерится.

Упрощённая структура проекта:

index.ts:

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
  document.getElementById("root")
);

store.ts:

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware))
);

sagaMiddleware.run(rootSaga);

App.tsx:

export const App: FC = () => {
  console.log("start App");
  const state = useSelector((state: AppState) => state.isLoading);
  console.log(state);
  return <h1>hey</h1>;
};

sagas.ts:

export function* watchFetchFilm() {
  console.log("start watchFetchFilm");

  yield takeLatest(FETCH_FILM_REQUESTED, fetchFilm);
}

export function* rootSaga() {
  console.log("start root");
  yield watchFetchFilm();
}

вывод в консоль:


Почему App рендерится дважды?

Answer 1

[dev null]

У react devtools есть вкладка Profiler, там есть опция - показывать, что привело к рендеру компонента. На вскидку состояние хранилища редакса изменилось после экшена, isLoading может быть и не поменял своего значения, но useSelector сравнивает по ссылке.

When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.

Вы можете использовать reselect, что бы мемоизировать слайсы редакс стора. Ну и почитайте отличие хуков редакса от connect()

Comments

[G F]

Profiler показал что компонент рендерится только 1 раз - но тогда другой вопрос - откуда в консоли 2 записи?

[Артур Гранд]

fomenkogregory, нашли причину? У меня такая же проблема

[G F]

Артур Гранд,
Нет, к сожалению, не нашел.
Такая же проблема - тоже логи 2 раза?

[Артур Гранд]

fomenkogregory, агась