Intermediate React Interview QuestionsIntermediateComparison
React · Question 47
What is the difference between putting logic in an event handler and putting it in an Effect?
Direct answer
Event handlers run because a specific interaction occurred, while Effects run because rendered state must synchronize with an external system.
| Question | Event handler | Effect |
|---|---|---|
| Why does it run? | A particular interaction happened | Synchronization is required after rendering |
| Typical example | Submit order after button click | Connect to a room while roomId is active |
| Reactive? | No; runs only for the interaction | Yes; re-synchronizes when dependencies change |
| Common mistake | Putting synchronization here that should follow rendered state | Putting interaction-specific actions here |
If sending a POST request should happen because the user clicked Submit, keep it in the submit handler. If a connection should exist whenever a particular roomId is rendered, an Effect expresses that synchronization.