Command Palette

Search for a command to run...

Bug: react-hooks/set-state-in-effect: false-positive with ternary

Bounty Amount

$88USDC

Issue Description

React version: react@19.2.0, eslint-plugin-react-hooks@7.0.1


Steps To Reproduce


```tsx

function getWidth(el: HTMLElement) {

return el.clientWidth;

}


function Component({value}: {value: string}) {

const [width, setWidth] = useState(0);

const ref = useRef<HTMLDivElement>(null);


useEffect(() => {

setWidth(ref.current ? getWidth(ref.current) : 0);

// ^^^^^^^^^^^^ Avoid calling setState() directly within an effect

}, [value]);


return <div ref={ref}>{value}{width}</div>;

}

```


Changing the line to `setWidth(getWidth(ref.current));` makes the error go away, so it seems the presence of the ternary operator is confusing the rule.


The current behavior


Error is raised.



The expected behavior


No error to be raised.


Requires GitHub sign-in