diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md index 7517d5f9286..7764c1abacd 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md @@ -88,7 +88,7 @@ function Counter({max}) { } ``` -As soon as `count` exceeds `max`, an infinite loop is triggered. +Although this won't cause an infinite loop (since the condition eventually becomes false), it interrupts the current render and forces React to start over, making your component slower. Instead, it's often better to move this logic to the event (the place where the state is first set). For example, you can enforce the maximum at the moment you update state: