Reactbeginner

useEffect

A React Hook that runs code when your component loads or when specific values change.

Detailed Explanation

useEffect is a React Hook for side effects — operations that go beyond rendering, like fetching data from an API, updating the document, or setting up timers. useEffect runs code at specific moments: after the component renders, when it loads, or when dependencies change.

You pass useEffect a function and optionally a dependency array: useEffect(() => { fetchData() }, [userId]). The function runs when userId changes. An empty array [] means "run once on mount." useEffect returns a cleanup function for unsubscribing from real-time subscriptions or clearing timers.

Common useEffect patterns include fetching data from Supabase, setting up WebSocket subscriptions, and syncing with state changes. Claude Code writes useEffect with proper cleanup and dependency arrays.

A common use of useEffect is setting up authentication listeners like onAuthStateChange, which track login/logout events throughout the app's lifecycle.

Code Example

javascript

Ready to Build Something Real?

We give you the skills to build, deploy, and own a full product. Professional stack, AI co-pilot, no coding background required.