Skip to content

Commit c910e2e

Browse files
AVGVSTVS96claude
andcommitted
refactor: simplify useStableOptions to return value directly
Remove revision counter indirection - the stable reference itself changes only when content changes, so it works directly in deps arrays. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 04bd967 commit c910e2e

File tree

2 files changed

+10
-8
lines changed

2 files changed

+10
-8
lines changed

package/src/lib/hook.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ export const useShikiHighlighter = <F extends OutputFormat = 'react'>(
4141
): OutputFormatMap[F] | null => {
4242
const [output, setOutput] = useState<OutputFormatMap[F] | null>(null);
4343

44-
const [stableLang, langRev] = useStableOptions(lang);
45-
const [stableTheme, themeRev] = useStableOptions(themeInput);
46-
const [stableOpts, optsRev] = useStableOptions(options);
44+
const stableLang = useStableOptions(lang);
45+
const stableTheme = useStableOptions(themeInput);
46+
const stableOpts = useStableOptions(options);
4747

4848
const { languageId, langsToLoad } = useMemo(
4949
() =>

package/src/lib/utils.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@ import { dequal } from 'dequal';
33

44
import type { TimeoutState } from './types';
55

6-
export const useStableOptions = <T>(value: T) => {
6+
/**
7+
* Returns a stable reference that only changes when content changes (deep equality).
8+
* Prevents unnecessary re-renders when objects are recreated with identical content.
9+
*/
10+
export const useStableOptions = <T>(value: T): T => {
711
const ref = useRef(value);
8-
const revision = useRef(0);
912

1013
if (typeof value !== 'object' || value === null) {
1114
if (value !== ref.current) {
1215
ref.current = value;
13-
revision.current += 1;
1416
}
15-
return [value, revision.current] as const;
17+
return value;
1618
}
1719

1820
if (value !== ref.current) {
@@ -22,7 +24,7 @@ export const useStableOptions = <T>(value: T) => {
2224
}
2325
}
2426

25-
return [ref.current, revision.current] as const;
27+
return ref.current;
2628
};
2729

2830
export const throttleHighlighting = (

0 commit comments

Comments
 (0)