Using useEffect Effectively – David Khourshid, React Advanced London 2022

Learn best practices for using useEffect effectively in React, including when to use and when to avoid, and discover alternative hooks for common use cases.

Key takeaways

useEffect should not be used for side effects but only for synchronization with activity
Activity effects go in useEffect while action effects go in event handlers
useEffect should not be used for fetching data, instead use useQuery or similar hooks
useEffect should not be used for derived values, instead use useMemo
Avoid using useEffect for synchronization, use useSyncExternalStore instead
Don’t use useEffect for event listening, use event handlers instead
Don’t use useEffect for caching, use a dedicated caching mechanism instead
Be careful when using useEffect with promises and async/await
Don’t use useEffect for complex conditionals, use simpler alternatives instead
Don’t use useEffect for complex state machines, use a dedicated state management library instead
Use useEffect only for simple, one-time effects and not for complex or ongoing processes
Don’t override the default behavior of useEffect without understanding the implications
Use useEffect with caution and only when necessary
Consider using alternative hooks like useQuery or useSyncExternalStore instead of useEffect
Don’t use useEffect for fetching data in a component, do it in a dedicated fetch hook instead

Using useEffect Effectively – David Khourshid, React Advanced London 2022

More talks