Как мне убедиться, что мой первый рендер с React имеет значение из localStorage?

Question

Мой сайт имеет светлую и темную тему.Тема по умолчанию - light.Если пользователь меняет тему на dark, она сохраняется в localStorage.

При следующем посещении / обновлении в корне дерева моего компонента этот код выполняется:

  useLayoutEffect(() => {
    let storedTheme = localStorage.getItem("theme");

    if (storedTheme === "light" || storedTheme === "dark") {

    // Redux action. Other components subscribe to the theme.
      setTheme(storedTheme);
    }
  }, [setTheme]);

Скажите, что пользователь выбрал темную тему в качестве своего предпочтения.Работает нормально.Тем не менее, первый рендер будет легкой темой.Второй рендер будет темной темой.Это вызывает мерцание от светлого до темного при посещении сайта.

Есть ли способ убедиться, что мой первый рендер имеет заданное значение от localStorage?

Answer 1

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

if (typeof localStorage != "undefined") {
  initialState = {
    theme: localStorage.getItem("theme"),
  };
} else {
  initialState = {};
}

const store = createStore(reducers, initialState);

Но это ухудшило ситуацию, так как компоненты больше не перерисовывались при первой загрузке, потому что themeprop from redux никогда не менялся, потому что хранилище было инициализировано с предпочтениями пользователя.Итак, я вернулся к старому подходу в первоначальном вопросе, приведенном выше.

Мерцание происходит, потому что я использую Javascript для управления темой в своем приложении реакции.Я также использую Gatsby, которая генерирует статическую версию моего сайта, которая загружается до того, как мое приложение отреагирует.

Загрузка сайта происходит следующим образом:

1. Например Пользователь с темными предпочтениями посещения.Они видят статический контент без Javascript, в то время как пакеты JS загружаются в фоновом режиме.

2. Поскольку легкая тема используется по умолчанию, статическая версия сайта будет светлой.

3. Загрузка Javascript и первый рендеринг React происходит, и резервное хранилище инициализируется.Корневой компонент получает тему от localStorage, а дерево перерисовывается с темной темой.

Мерцание происходит из-за событий от 2 до 3.

Мне не удалось решить проблему полностью.Но мне удалось смягчить мерцание, чтобы сделать его гораздо более незаметным, включив работника службы Гэтсби.Работник кэширует комплекты Javascript для следующего посещения сайта, а загрузка Javascript с диска означает, что мерцание задержится на более короткое время, поскольку комплекты JS уже доступны для выполнения.

Answer 2

Реализация сохранения темы в локальном хранилище следующим образом.

const [storedTheme, setStoredTheme] = useState(JSON.parse(localStorage.getItem("theme")) || "light");


useEffect(() => {
    localStorage.setItem("theme", JSON.stringify(storedTheme));
}, [storedTheme]);

А затем в пользовательском интерфейсе приложения используйте метод setStoredTheme () для установки темы на «светлый» или «темный».