Fix React Hook dependency warnings and stale closures in ForgeMode

[Abhishek2005-ard]

Description

In ForgeMode.jsx, there are missing dependencies in two useEffect hooks. This triggers ESLint warnings (react-hooks/exhaustive-deps) and creates the risk of state desynchronization. If the component re-renders, these effects may operate on stale closures (outdated state values), potentially causing the timer to malfunction or the audio stream to ignore volume/mute changes.

ESLint Warnings

Running npm run lint in the frontend directory outputs the following:

• Line 135: React Hook useEffect has a missing dependency: 'handleTimerComplete'.
• Line 157: React Hook useEffect has missing dependencies: 'isMuted', 'isRunning', and 'volume'.

Expected Behavior

All reactive variables referenced inside useEffect hooks should be properly tracked in the dependency array to ensure the effect always captures the latest state.

Proposed Solution

1. Timer Effect: Wrap the handleTimerComplete function in a useCallback hook and safely add it to the dependency array of the interval effect.
2. Audio Stream Effect: Refactor the audio initialization effect. Currently, it tries to access isMuted, volume, and isRunning without tracking them. We should either add these to the dependency array and properly manage re-instantiation, or remove them from this specific hook entirely since there are already separate hooks below it that handle syncing volume, muting, and playing/pausing.

[Abhishek2005-ard]

/assign

[desireddymohithreddy0925]

Greetings @aryandas2911 sir,

I would like to work on this issue under GSSoC 2026.

I understand that ForgeMode.jsx contains missing dependencies in its useEffect hooks, which lead to ESLint warnings and may result in stale closures affecting the timer and audio synchronization.

I will work on:

1. Resolving the missing useEffect dependencies in accordance with React Hooks best practices.
2. Wrapping handleTimerComplete with useCallback where appropriate to safely include it in the dependency array.
3. Refactoring the audio-related effect to correctly handle isMuted, volume, and isRunning without causing unnecessary re-renders.
4. Testing the timer and audio functionality to ensure everything remains synchronized while eliminating the ESLint warnings.

Kindly assign this issue to me if possible. I would be happy to work on it. Thank you!

[Ashuge11]

Hi @Abhishek2005-ard ,

I would like to work on this issue.

I plan to:

• Wrap handleTimerComplete with useCallback and add it to the appropriate useEffect dependency array.
• Refactor the audio initialization effect to resolve the missing dependency warnings while avoiding unnecessary audio re-instantiation.
• Ensure all react-hooks/exhaustive-deps ESLint warnings are fixed and the existing behavior remains unchanged.

Could you please assign this issue to me? Thank you!

[Ashuge11]

Hi @Abhishek2005-ard ,

I investigated this issue on the latest codebase and ran npm run lint, but the reported react-hooks/exhaustive-deps warnings are no longer appearing in ForgeMode.jsx.

It seems the issue may already be fixed in the current version. Could you please confirm whether this issue is still reproducible or if it can be closed?

Thank you.
,

I investigated this issue on the latest codebase and ran npm run lint, but the reported react-hooks/exhaustive-deps warnings are no longer appearing in ForgeMode.jsx.

It seems the issue may already be fixed in the current version. Could you please confirm whether this issue is still reproducible or if it can be closed?

Thank you.