[Bug]: Documentation for hooks: warning about infinite loop useEffect with state update is not prominent

Summary

Description

The documentation for React Hooks (especially useEffect) mentions that updating state inside an effect without a proper dependency array can cause infinite loops, but this warning is not highlighted prominently. Many beginners miss this and end up in render loops.

Given how frequently this issue occurs, the documentation should emphasize it more clearly, perhaps with a bold warning and a simple example.

Example that causes confusion

import React, { useState, useEffect } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(c => c + 1);
  }); // Missing dependency array

  return <div>{count}</div>;
}

Running this causes an infinite render loop because setCount triggers a state update on every render, re-invoking useEffect.

Actual behavior

• Docs mention dependency arrays briefly, but the infinite loop risk is not highlighted enough.
• Beginners often miss this and think React is “re-rendering infinitely” due to a bug.

Expected behavior

• The official docs should include a bold, visible warning in the useEffect section, such as:

Warning: Omitting the dependency array causes the effect to run after every render, potentially leading to infinite loops if state or props are updated inside.

• Include a small “bad vs. good” code example pair to clarify.

Why this matters

This is one of the most common pitfalls for new React developers. Making the warning prominent in official docs will help reduce confusion and GitHub issues related to infinite re-renders.

Environment

• React version: 18.x (or whichever version is current)
• Browser: Chrome 118
• OS: Windows 11 / Ubuntu 22.04

Additional info

Several discussions online highlight this confusion; here’s one example:
https://www.reddit.com/r/reactjs/comments/oomo1w/what_are_the_biggest_issues_you_see_with_react_in/

Page

https://react.dev/reference/react/useEffect

Details

The warning could be moved closer to the main example or highlighted with a strong visual cue (e.g., bold text or a red caution box).
This would help prevent confusion among new React users who encounter infinite loop behavior.

Bắt đầu từ trang tham khảo useEffect được liên kết trong issue và xem lại cách các mảng dependency cùng ví dụ chính hiện đang được giải thích. Làm cho cảnh báo về vòng lặp vô hạn nổi bật hơn và thêm một ví dụ ngắn gọn về cách làm không tốt so với cách làm tốt, sau đó xác minh rằng trang giải thích rõ ràng rủi ro của việc cập nhật state từ một effect mà không có mảng dependency.