Skip to content

Commit

Permalink
Add safer refresh on InteractiveExample (#6057)
Browse files Browse the repository at this point in the history
Before when page was loading, there was a chance that `width` value
wouldn't be passed to component in `InteractiveComponent` - in other
words the `width` will be passed to component before it had become
something other than `null`, and there won't be a rerender after width
gets a number value. After this change, with `useEffect` hook, we
monitor if width has changed and if so, we trigger a rerender that
guarantees our component will always get correct width.
  • Loading branch information
patrycjakalinska committed May 28, 2024
1 parent 4d44d38 commit 4cd7505
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions docs/src/components/InteractiveExample/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,12 @@ export default function InteractiveExample({
}
}, [interactiveExampleRef.current]);

React.useEffect(() => {
if (width !== null) {
setKey(key + 1);
}
}, [width]);

const prefersReducedMotion = useReducedMotion();

return (
Expand Down

0 comments on commit 4cd7505

Please sign in to comment.