NextJs используйте эффективность, не выполняя внутренний крюк ⇐ Javascript

[Anonymous]

У меня есть крючок, который проверяет, темная тема или светлая: < /p>

Код: Выделить всё

"use client";

import { useEffect, useState } from "react";

function useDarkMode() {
const [isDarkMode, setIsDarkMode] = useState(false);

useEffect(() => {
console.warn("checked");
}, []);

useEffect(() => {
let observer: MutationObserver | null = null;

const init = () => {
const themeDiv = document.getElementById("theme");
if (!themeDiv) {
console.warn("#theme not found");
return;
}

const update = () => setIsDarkMode(themeDiv.classList.contains("dark"));

observer = new MutationObserver(update);
observer.observe(themeDiv, {
attributes: true,
attributeFilter: ["class"],
});

// Initial check
update();
};

// Delay to ensure DOM is ready
requestAnimationFrame(init);

return () => observer?.disconnect();
}, []);

return isDarkMode;
}

export default useDarkMode;

Я использую его внутри моего компонента dotgrid с помощью react-bites
link для react bites component.
Inside const dotgrid Я добавил:

Код: Выделить всё

const isDarkMode = useDarkMode();
console.log("is Dark Mode", isDarkMode);

Режим всегда ложный, потому что useeffect не работает. У DotGrid используется клиент в верхней части компонента. Оба используют клиентские компоненты. Какова причина и как это исправить?
Я ожидаю отображения консоли.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... nside-hook