React Events: Pass, Don't Call
React handles user actions with event handler functions passed as props, like `onClick={handleClick}`. This is how you make buttons or forms interactive. The key mistake is calling the function (`onClick={doIt()}`), which runs on render, not on click.
React handles user actions like clicks with event handler functions you define inside your component. You wire them up by passing the function itself as a prop, like `<button onClick={handleClick}>`. This is the core of interactivity, used for everything from submitting forms to handling hovers. The most common footgun is accidentally calling the function during render (`onClick={doIt()}`) instead of passing a reference to it (`onClick={doIt}`), which causes the code to run on every render instead of just on the user's click.
Read the original → react.dev
- #react
- #javascript
- #ui
- #events
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.