Почему тема меняется только после второго клика на переключатель?

Question

[vertically-challenged]

Для смены темы я использую такой код:

Функция, обрабатывающая клик на переключатель, которую я передаю в кнопку из компонента App:

const onThemeToggleHandler = (theme, setTheme) => {
  setTheme(theme == 'theme-dark' ? 'theme-light' : 'theme-dark')
}

Состояние темы и useEffect, в котором и происходит смена классов так же в компоненте App:

const [theme, setTheme] = useState('theme-dark')

  useEffect(() => {
    document.querySelector('.App').classList.toggle(theme)
  }, [theme])

Ссылка на запущенный проект
Ссылка на репозиторий на gitHub

Answer 1

[0xD34F]

Как переключается тема? Старый класс удаляется, новый добавляется. Давайте посмотрим, что делаете вы:

useEffect(() => {
  document.querySelector('.App').classList.toggle(theme)
}, [theme])

Переключаете новый класс. Не добавляете, а переключаете. А старый - вообще не трогаете. Исправляем:

useEffect(() => {
  const el = document.querySelector('.App');
  el.classList.add(theme);
  return () => el.classList.remove(theme);
}, [ theme ]);

Comments

[vertically-challenged]

Вот эта строчка непонятна, как оно работает?

return () => el.classList.remove(theme);

[0xD34F]

vertically-challenged, https://ru.reactjs.org/docs/hooks-reference.html#c...

Answer 2

[Alexandroppolus]

Зачем вручную менять класс? Это "антиРеакт". Держи тему в контексте, завязывай рендер компонента App на значение из контекста, по клику меняй это значение - правильный общепринятый способ. А твой вариант хрупкий и вообще дурацкий.