fix: use effect for theme sync (#2961)

SoonIter · web-flow · commit 170fef836ae7 · 2026-01-05T10:00:27.000Z
diff --git a/packages/core/src/theme/logic/useScrollAfterNav.ts b/packages/core/src/theme/logic/useScrollAfterNav.ts
@@ -1,5 +1,5 @@
 import { useLocation } from '@rspress/core/runtime';
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
 /**
  * Parse CSS length value to number (in pixels)
@@ -49,7 +49,7 @@ function scrollToTarget(target: HTMLElement) {
 export function useScrollAfterNav() {
   const location = useLocation();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const decodedHash = decodeURIComponent(window.location.hash);
     if (decodedHash.length > 0) {
       const target = document.getElementById(decodedHash.slice(1));
diff --git a/packages/core/src/theme/logic/useScrollReset.ts b/packages/core/src/theme/logic/useScrollReset.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 /**
@@ -8,7 +8,7 @@ import { useLocation } from 'react-router-dom';
 export function useScrollReset() {
   const { pathname } = useLocation();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const decodedHash = decodeURIComponent(window.location.hash);
     if (decodedHash.length === 0) {
       window.scrollTo(0, 0);
