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

Here is the breakdown of what hurt your score, plus a cleaned-up version you can use as a starting point. If the roast feels fair, share it. If it feels unfair, paste better code next time.

score

4.0 / 10

fixed output

3 lines

line delta

-6

// summary

Your strongest next move is to fix the highest-severity issue first, then compare the cleanup against the original before shipping anything.

// sharing

Public roasts can land in the leaderboard. Private reviews stay out of it and are better for real code you do not want exposed.

// compare

Use the original and fixed blocks below to spot naming, logic, and structure changes quickly instead of reading the whole thing twice.

//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

original: 9 lines · fixed: 3 lines

PointlessComponent_fixed.js

+function HelloWorld() {

+ return <div>Hello</div>