What you need to know
Effects run after rendering and can introduce extra updates, stale data, or loops when used for ordinary calculations. Derived values are often simpler to compute directly from props and state.
How to apply it
Use an effect for subscriptions, browser APIs, timers, or network synchronization. Include the values it reads in dependencies, and return cleanup for work that should stop.
Common mistake to avoid
Do not suppress dependency warnings just to make an effect run once. Rework the data flow or use an event handler when the work belongs to a user action.