Why shouldn't you call a handler as onClick={handleClick()}?
Quick answer
That calls the function during render and uses its return value as the handler. Pass the reference onClick={handleClick}, or wrap to pass args: onClick={() => handleClick(id)}.
In detail
onClick expects a function reference. Writing handleClick() invokes it immediately on every render (often causing 'too many re-renders' if it sets state) and assigns the return value as the listener. Use the reference directly, or an arrow wrapper when you need arguments.
<button onClick={handleClick}>OK</button> // ✅
<button onClick={() => remove(id)}>Delete</button> // ✅ with arg
<button onClick={handleClick()}>Bad</button> // ❌ runs nowWhy interviewers ask this: A very common beginner bug interviewers like to surface.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399