Skip to content

Commit

Permalink
🐛 fix: hydration mismatch in grid background (lobehub#171)
Browse files Browse the repository at this point in the history
* 🐛 fix: hydration mismatch in grid background

* 🐛 fix: allow changing random during lifecycle
  • Loading branch information
phuctm97 authored Jun 25, 2024
1 parent f5d7b6b commit bbe43c4
Showing 1 changed file with 11 additions and 5 deletions.
16 changes: 11 additions & 5 deletions src/GridBackground/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useSize } from 'ahooks';
import { shuffle } from 'lodash-es';
import { memo, useCallback, useMemo, useRef } from 'react';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';

import { DivProps } from '@/types';

Expand All @@ -22,6 +22,8 @@ export interface GridBackgroundProps extends DivProps {
strokeWidth?: number;
}

const initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

const GridBackground = memo<GridBackgroundProps>(
({
flip,
Expand Down Expand Up @@ -51,14 +53,18 @@ const GridBackground = memo<GridBackgroundProps>(
[reverse, colorFront, strokeWidth],
);

const [group, setGroup] = useState(random ? initialGroup : undefined);
useEffect(() => {
setGroup(random ? shuffle(initialGroup) : undefined);
}, [random]);

const HighlightGrid = useCallback(() => {
if (!random)
if (!group)
return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;

const group = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
return (
<>
{shuffle(group).map((item, index) => {
{group.map((item, index) => {
return (
<Grid
key={item}
Expand All @@ -75,7 +81,7 @@ const GridBackground = memo<GridBackgroundProps>(
})}
</>
);
}, [random, animationDuration, gridProps]);
}, [group, animationDuration, gridProps]);

return (
<div
Expand Down

0 comments on commit bbe43c4

Please sign in to comment.