Avoid effects that only derive data from props/state.
Section: Performance Pitfalls
Derive data during render when possible
tsx
tsx
// Prefer deriving directly:
const filtered = items.filter(item => item.active);
// Instead of syncing derived state in an effect.Explanation
If something can be calculated from current props/state, compute it during render rather than syncing another state variable.
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
Perform event-specific work in event handlers
Do not move user-triggered logic into effects unnecessarily.
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.
Call hooks only at the top level
Do not call hooks in conditions, loops, or nested functions.
Stale closure pitfall
Effects and callbacks capture values from the render where they were created.
Call hooks only from components or custom hooks
Do not call hooks from regular utility functions.