Home React Reference useEffect()

useEffect()

hook React 16.8

Runs side effects after render. The dependency array controls when it re-runs.

Syntax

useEffect(setup, dependencies?)

Example

javascript

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetch(`/api/users/${userId}`)
            .then(r => r.json())
            .then(setUser);

        // Cleanup function (runs on unmount or before next effect)
        return () => { /* cancel request */ };
    }, [userId]); // re-run when userId changes

    return user ? <h1>{user.name}</h1> : <p>Loading...</p>;
}

useState()

useContext()