Premium

useEffect vs event-handler logic in React

Guided tradeoff battle · Updated Mar 29, 2026

A React save flow needs a request, success toast, analytics event, and modal close after the user clicks Save. Would you run that logic in useEffect or keep it in the event handler?

Keep it in the event handler
Move it into useEffect

What you’ll build / What this tests

This premium react tradeoff battle focuses on useEffect vs event-handler logic in React. Commit to a direction, justify it with the prompt constraints, and explain when the alternative wins.

Learning goals

What is the real trigger?
Should the full workflow stay in one place?
Are you syncing with something outside React?
Can the same state change from multiple paths?

Key decisions to discuss

Pick a direction for this exact prompt, not the universal winner.
State the trade-off that matters most for this scenario.
Name when another option becomes the better answer.
Keep the explanation grounded in concrete constraints.

Evaluation rubric

Strong answers tie the recommendation to the prompt.
Good tradeoff reasoning explains downsides, not just upsides.
The answer should show when the recommendation stops being right.
Follow-up pressure should not break the argument.

Constraints / Requirements

Which direction would you defend for this prompt, and how would you explain when the other option is…
Keeps user-triggered workflows close to the action that caused them.
Fits best when the effect should run because state changed, not because one specific event handler…

Options on the table

Keep it in the event handler: Keeps user-triggered workflows close to the action that caused them.
Move it into useEffect: Fits best when the effect should run because state changed, not because one specific…

Common pitfalls

Arguing from preference instead of prompt constraints.
Pretending one option is always the winner.
Ignoring the main downside of the chosen direction.
Failing to explain when the alternative becomes stronger.