Do not move user-triggered logic into effects unnecessarily.
Section: Performance Pitfalls
Perform event-specific work in event handlers
tsx
tsx
function handleSave() {
saveDraft(form);
}
<button onClick={handleSave}>Save</button>Explanation
Effects should synchronize with external systems because rendering happened, not because you want to run arbitrary imperative code later.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Performance Pitfalls
Derive data during render when possible
Avoid effects that only derive data from props/state.
Do not memoize everything
Memoization has a cost; use it when it solves a concrete problem.
Move non-reactive logic out of effects
Keep effects focused on synchronization.
Stale closure pitfall
Effects and callbacks capture values from the render where they were created.
Call hooks only at the top level
Do not call hooks in conditions, loops, or nested functions.
Call hooks only from components or custom hooks
Do not call hooks from regular utility functions.