test: Hooks & Effects Performance Violations

[rvelaz]

Testing BUGBOT Detection: Hooks & Effects Violations

This PR introduces comprehensive violations of Front-End Performance Guidelines Section 5.1 (Hooks & Effects) to test BUGBOT's automated detection capabilities.

Violations Introduced

useTokenRatesPolling.ts

• Using useEffect for derived state instead of computing during render
• Deep object dependencies without proper memoization (pollingConfig object)
• Missing cleanup function for polling operations

useAsyncResult.ts

• Removed AbortController for fetch operations
• Missing cleanup for async operations after unmount
• Conditional hook call (breaks Rules of Hooks)

useTokenBalances.ts

• Cascading useEffect chains (multiple effects triggering each other)
• Missing dependencies in useEffect array
• Using regular variable instead of useRef for persistent values

Expected BUGBOT Detections

• ❌ Don't overuse useEffect
• ❌ Never use deep object dependencies without memoization
• ❌ Missing cleanup functions
• ❌ Conditional hook calls
• ❌ Cascading useEffect chains
• ❌ Missing dependencies
• ❌ Regular variables instead of useRef

All violations are intentional for testing purposes.

---

Note

Intentionally restructures several hooks to alter polling flow and async handling.

• useAsyncResult: Adds optional skipExecution to bypass running asyncFn and return a default result; removes cancellation/cleanup logic; simplifies success/error state updates.
• useTokenBalances: Replaces direct useMultiPolling usage with chained useEffects managing pollingInput and isPolling state; invokes useMultiPolling inside an effect; introduces local isMounted var.
• useTokenRatesPolling: Derives enabled via local state + effect; constructs a pollingConfig object and calls useMultiPolling within an effect; selectors/returned data unchanged.

^{Written by Cursor Bugbot for commit 9cbf073. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 8 potential issues.

[cursor]

Conditional hook call violates Rules of Hooks

High Severity

The useState call inside the if (skipExecution) block violates React's Rules of Hooks. Hooks must be called unconditionally and in the same order on every render. When skipExecution changes between true and false, the hook call order changes, causing React to fail to preserve state correctly and likely crash with a hooks order violation error.

 

[cursor]

Removed cleanup causes state updates after unmount

Medium Severity

The cancelled flag and cleanup function were removed from the useEffect. Now when the component unmounts while an async operation is in flight, setResult will still be called on an unmounted component. This causes the React warning "Can't perform a React state update on an unmounted component" and represents a memory leak and potential data inconsistency.

 

[cursor]

Hook called inside useEffect callback

High Severity

useMultiPolling is a React hook (it uses useEffect and useRef internally), but it's being called inside a useEffect callback. This violates the Rules of Hooks - hooks cannot be called inside callbacks, loops, or conditions. This will cause a React runtime error.

 

[cursor]

Regular variable used instead of useRef

Medium Severity

let isMounted = false is a regular variable that gets reset to false on every render. If the intent is to track mounted state across renders, this needs to be useRef. The variable is assigned in useEffect but the value won't persist, making any logic depending on it unreliable.

 

[cursor]

useEffect missing dependency array causes infinite loop

High Severity

The useEffect at line 34 has no dependency array, causing it to run on every render. Combined with the hook violation inside it, this will trigger on every state update, creating an infinite render loop or continuous effect execution that degrades performance and causes unexpected behavior.

 

[cursor]

Hook called inside useEffect callback

High Severity

useMultiPolling is a React hook being called inside a useEffect callback. This violates the Rules of Hooks - hooks must be called at the top level of a component or custom hook, not inside callbacks. This will cause a React runtime error.

 

[cursor]

Object dependency causes effect to run every render

Medium Severity

The pollingConfig object is created fresh on every render and used as a useEffect dependency. Since objects are compared by reference, this causes the effect to run on every render, potentially creating polling loops or wasting resources. The object needs useMemo for stable reference.

 

[cursor]

Race condition allows stale async results to overwrite fresh ones

High Severity

The removed cancelled flag also prevented race conditions when dependencies change rapidly. Without it, if dependencies change while an async operation is in flight, a slow-completing old request can overwrite the result of a newer request. For example, in useLatestBalance, switching tokens quickly could show token A's balance while displaying token B, because the stale result arrives after the fresh one and overwrites it.

 

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity in the last 60 days. It will be closed in 14 days. Thank you for your contributions.