React hook useContext компонент повторной визуализации

Question

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

Любая идея, чтобы предотвратить рендеринг дважды компонента?

store. js:

import React, { createContext, useReducer } from 'react';

const initialState = {
  accessToken: '',
  expirationDate: '',
  fullName: ''
};
const store = createContext(initialState);
const { Provider } = store;

const StateProvider = ({ children }) => {
const [state, dispatch] = useReducer((state, action) => {
  const { type, payload } = action;

  switch (type) {
    case 'login':
      const newState = {
        ...state,
        ...payload
      };
      return newState;
    default:
      throw new Error();
    }
  }, initialState);

  return <Provider value={{ state, dispatch }}>{children}</Provider>;
};

export { store, StateProvider };

, когда я использую useContext (store) я получаю этот результат:

useContext result

Answer 1

Не по умолчанию ошибка

Всегда возвращайте состояние в вашем редукторе, а не неопределенное. Это первая проблема, которую я вижу.

default:
  throw new Error();
}

до

default:
  return state;
}