[Mistake]: set-state-in-effect gives a wrong example of bad usage

Summary

https://github.com/reactjs/react.dev/blob/abe931a8cb3aee3e8b15ef7e187214789164162a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md?plain=1#L70-L91

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 max prop:

// ❌ 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 count exceeds max, 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.

Đọc src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md, đặc biệt là các dòng được liên kết 70–91 và phần “I want to sync state to a prop”. Kiểm tra ví dụ Counter và nhận định của nó dựa trên hành vi được mô tả trong issue; công việc được xem là hoàn tất khi ví dụ và phần giải thích mô tả chính xác trường hợp được báo cáo.