"React called, it wants its useless re-renders back. This is what happens when someone learns useEffect before learning HTML."

lang: JavaScript·9 lines

//your_submission

PointlessComponent.js

function HelloWorld() {
  const [text, setText] = useState("Hello");
  
  useEffect(() => {
    setText("Hello");
  }, []);

  return <div>{text}</div>
}

//detailed_analysis

Useless useEffect

Setting a state to the exact same value on mount. You just forced React to do a backflip for absolutely no reason.

Unnecessary State

If a value never changes, it's called a constant. Not everything needs to be wrapped in a useState hook, you absolute maniac.

Missing Imports

Good luck running this without importing useState and useEffect. I'm guessing 'Cannot find name' is your favorite error.

//suggested_fix

PointlessComponent_fixed.js

+function HelloWorld() {

+ return <div>Hello</div>