### ROOT CAUSE
The issue occurs because the `react-hooks/set-state-in-effect` rule fails to detect `setState` calls inside `useEffect` hooks when the component is an anonymous function passed to a higher-order function (HOC). This is due to the rule's static analysis not properly traversing into the nested function scope, especially when the hook is inside a function that is itself passed to a higher-order function.
### CODE FIX
To ensure the rule works correctly for both named and anonymous components, refactor the anonymous component into a named component. This allows the rule to properly analyze the hooks.
**Changes:**
1. Replace the anonymous function with a named function component.
2. Keep the rest of the code unchanged.
```ts
// app/ComponentToCheck.ts
import { useEffect, useState } from 'react'
const wrap = (value) => value
export function DirectComponent() {
const [value, setValue] = useState(0)
useEffect(() => {
// Direct
setValue(1)
}, [])
return
{value}
}
// Replace anonymous component with named component
export function WrappedNamedComponent() {
const [value, setValue] = useState(0)
useEffect(() => {
// in HOC
setValue(1)
}, [])
return
{value}
}
export const WrappedAnonymousComponent = wrap(() => {
// This should be moved to WrappedNamedComponent
})
```
This change ensures the rule properly detects `setState` inside `useEffect` for all components, including those wrapped in HOCs.
Related Fixes
[StackOverflow/python] Getting StopIteration when using HuggingFaceEndpoint with LangChain and flan-t5-large
[microsoft/vscode] Ollama models are not detected in Chat
[StackOverflow/kubernetes] Readiness probe failing for pod
digitalravenco