[Mistake]: set-state-in-effect gives a wrong example of bad usage
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Summary
Page
https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-render
Details
I want to sync state to a prop {/clamp-state-to-prop/}
A common problem is trying to "fix" state after it renders. Suppose you want to keep a counter from exceeding a
maxprop:
// ❌ Wrong: clamps during render
function Counter({max}) {
const [count, setCount] = useState(0);
if (count > max) {
setCount(max);
}
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}
As soon as
countexceedsmax, an infinite loop is triggered.
I think this Counter component can be rendered and clicked without issues.
The claim that an infinite loop will be triggered is incorrect.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md, especially the linked lines 70–91 and the “I want to sync state to a prop” section. Check the Counter example and its claim against the behavior described in the issue; done means the example and explanation accurately describe the reported case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100