Skip to content

fix: respect prefers-reduced-motion in GlowingEffect component #534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Somil450 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: respect prefers-reduced-motion in GlowingEffect component #534

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions components/ui/glowing-effect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { memo, useCallback, useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { animate } from "motion/react";
import { animate, useReducedMotion } from "motion/react";

interface GlowingEffectProps {
blur?: number;
Expand Down Expand Up @@ -33,6 +33,7 @@
const lastPosition = useRef({ x: 0, y: 0 });
const animationFrameRef = useRef<number>(0);
const [isVisible, setIsVisible] = useState(false);
const prefersReducedMotion = useReducedMotion();

const handleMove = useCallback(
(e?: MouseEvent | { x: number; y: number }) => {
Expand Down Expand Up @@ -114,7 +115,7 @@
}, []);

useEffect(() => {
if (disabled || !isVisible) return;
if (disabled || !isVisible || prefersReducedMotion) return;

@qodo-code-review qodo-code-review Bot Jul 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Missing effect dependency 🐞 Bug ≡ Correctness

GlowingEffect’s event-listener useEffect reads prefersReducedMotion but omits it from the
dependency array, so changes to the reduced-motion preference won’t re-run the effect and may leave
listeners (and associated animation work) active until some other dependency changes or the
component unmounts. This is also the pattern flagged by the React hooks exhaustive-deps rule
typically enabled via next/core-web-vitals.
Agent Prompt 
### Issue description
`prefersReducedMotion` is used inside the event-listener `useEffect` but is not included in its dependency array. As a result, toggling the OS-level reduced-motion preference while the component is mounted will not trigger effect cleanup/re-subscription.

### Issue Context
- `prefersReducedMotion` is read via `useReducedMotion()`.
- The effect condition now early-returns when `prefersReducedMotion` is true.
- The effect dependency list currently does not include `prefersReducedMotion`.

### Fix Focus Areas
- components/ui/glowing-effect.tsx[117-135]

### Proposed fix
Update the dependency array to include `prefersReducedMotion` so the effect cleans up listeners when the preference changes:

```ts
useEffect(() => {
  if (disabled || !isVisible || prefersReducedMotion) return;
  // ...
}, [handleMove, disabled, isVisible, prefersReducedMotion]);
```

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


const handleScroll = () => handleMove();
const handlePointerMove = (e: PointerEvent) => handleMove(e);
Expand All @@ -131,7 +132,7 @@
window.removeEventListener("scroll", handleScroll);
document.body.removeEventListener("pointermove", handlePointerMove);
};
}, [handleMove, disabled, isVisible]);

Check warning on line 135 in components/ui/glowing-effect.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'prefersReducedMotion'. Either include it or remove the dependency array

return (
<>
Expand Down
Loading