♻️ The Component Lifecycle

The Three Phases

Think of a component like a plant. It's planted (mounting), it grows and responds to sun and water (updating), and one day it's pulled from the soil (unmounting). React gives you precise moments to hook into each phase — and in modern React, they all flow through useState and useEffect.

Render, Commit & Effect

Behind each phase, React runs the same three steps. Understanding this order explains why effects run when they do and why you never see a flash of stale UI.

On mount, all three run for the first time. On each update, they run again — but React first runs the cleanup of the previous effect before the new setup. On unmount, only cleanup runs. That single ordering rule governs the entire lifecycle.

Lifecycle with Hooks

Modern React has no named lifecycle methods. Instead, one Hook — useEffect — expresses every phase, and the dependency array decides which phase you're targeting.

A single effect can cover mount, update, and unmount at once — setup runs on mount and relevant updates, the returned cleanup runs before each re-run and on unmount:

function Profile({ id }) {
    const [data, setData] = useState(null);

    useEffect(() => {
        // Mount + every time `id` changes (update)
        let ignore = false;
        fetchData(id).then(result => { if (!ignore) setData(result); });

        // Runs before the next effect and on unmount
        return () => { ignore = true; };
    }, [id]);

    return <div>{data ? data.name : 'Loading…'}</div>;
}

Class Methods (Brief History)

Before Hooks (React 16.8, 2019), lifecycle logic lived in class components with named methods. You'll still meet them in older codebases, so it helps to recognize the mapping — but you should write new code with hooks.

For completeness, here's a class component and its hook equivalent — you don't need to write the class version, just read it:

// OLD: class component (recognize it, don't write it)
class LifecycleClass extends React.Component {
    state = { data: null };
    componentDidMount()  { fetchData(this.props.id).then(d => this.setState({ data: d })); }
    componentDidUpdate(prev) {
        if (prev.id !== this.props.id) {
            fetchData(this.props.id).then(d => this.setState({ data: d }));
        }
    }
    componentWillUnmount() { cancelDataFetch(); }
    render() { return <div>{this.state.data}</div>; }
}

// MODERN: one function, one effect covers all three phases
function LifecycleHooks({ id }) {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetchData(id).then(setData);   // mount + update
        return () => cancelDataFetch(); // unmount cleanup
    }, [id]);

    return <div>{data}</div>;
}

Mounting: Setup

Mounting is the component's first appearance. This is where you kick off one-time setup: fetch initial data, open a subscription, start a timer, focus an input.

function NewsFeed() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        // Runs once, right after the first render
        fetch('/api/posts')
            .then(res => res.json())
            .then(setPosts);
    }, []); // empty deps → mount only

    return (
        <ul>
            {posts.map(p => <li key={p.id}>{p.title}</li>)}
        </ul>
    );
}

Updating: Reacting to Change

A component updates whenever its state or props change. Put values in the dependency array to re-run an effect precisely when they change — and split unrelated reactions into separate effects.

function SearchResults({ query, category }) {
    const [results, setResults] = useState([]);

    // Effect A: re-run only when `query` changes
    useEffect(() => {
        if (!query) return;
        searchByQuery(query).then(setResults);
    }, [query]);

    // Effect B: independent — re-run only when `category` changes
    useEffect(() => {
        if (!category) return;
        filterByCategory(category).then(setResults);
    }, [category]);

    return <ResultsList results={results} />;
}

Unmounting: Cleanup

When a component leaves the screen, React runs the cleanup function of each effect. Skip it and you leak: timers keep ticking, listeners keep firing, and late network responses try to set state on a component that's gone.

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

    useEffect(() => {
        let mounted = true; // track whether we still care about the result

        async function load() {
            setLoading(true);
            const res = await fetch(`/api/users/${userId}`);
            const data = await res.json();
            if (mounted) {          // guard: skip if unmounted mid-flight
                setUser(data);
                setLoading(false);
            }
        }
        load();

        return () => { mounted = false; }; // cleanup on unmount / userId change
    }, [userId]);

    if (loading) return <p>Loading…</p>;
    if (!user)   return <p>User not found</p>;
    return <h2>{user.name}</h2>;
}

Timers and event listeners follow the same discipline — start on mount, stop on unmount:

useEffect(() => {
    const onScroll = () => console.log(window.scrollY);
    window.addEventListener('scroll', onScroll);
    const id = setInterval(() => console.log('tick'), 1000);

    return () => {
        window.removeEventListener('scroll', onScroll);
        clearInterval(id);
    };
}, []);

Optimizing the Lifecycle

Because a component re-runs on every update, expensive work inside it repeats too. Two memoization hooks let you skip that work when inputs haven't changed. Reach for them after you measure a real slowdown, not by default.

useMemo — cache an expensive value

function ProductList({ items, filter }) {
    // Only recompute when items or filter actually change
    const visible = useMemo(() =>
        items.filter(i => i.name.toLowerCase().includes(filter.toLowerCase())),
        [items, filter]
    );

    return (
        <ul>
            {visible.map(i => <li key={i.id}>{i.name}</li>)}
        </ul>
    );
}

useCallback — keep a function stable

Functions are recreated every render. If you pass one to a memoized child, a fresh function each time defeats the memo. useCallback returns the same function until its dependencies change.

const Child = React.memo(({ onClick }) => {
    console.log('Child rendered');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const [count, setCount] = useState(0);

    // Stable across renders → Child won't re-render needlessly
    const handleClick = useCallback(() => setCount(c => c + 1), []);

    return <Child onClick={handleClick} />;
}

Practice & Quiz

function LifecycleLogger() {
    // TODO: count state + a button to increment it
    // TODO: log "mounted" on mount and "will unmount" on unmount
    // TODO: log "updated" whenever count changes (but not on mount)
}

function LifecycleLogger() {
    const [count, setCount] = useState(0);
    const mounted = useRef(false);

    useEffect(() => {
        console.log('mounted');
        return () => console.log('will unmount');
    }, []);

    useEffect(() => {
        if (mounted.current) {
            console.log('updated — count is', count);
        } else {
            mounted.current = true; // skip the mount render
        }
    }, [count]);

    return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

function DataFetcher({ endpoint }) {
    const [data, setData]       = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError]     = useState(null);

    useEffect(() => {
        let ignore = false;
        setLoading(true);
        setError(null);

        fetch(endpoint)
            .then(res => {
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                return res.json();
            })
            .then(json => { if (!ignore) setData(json); })
            .catch(err => { if (!ignore) setError(err.message); })
            .finally(() => { if (!ignore) setLoading(false); });

        return () => { ignore = true; }; // cancel stale run
    }, [endpoint]);

    if (loading) return <p>Loading…</p>;
    if (error)   return <p>Error: {error}</p>;
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Best Practices & Pitfalls

✅ Do

• Keep each concern in its own effect — setup and cleanup together
• Always clean up subscriptions, timers, and listeners on unmount
• Guard async results with an ignore/mounted flag or AbortController
• Write new components as functions with hooks, not classes
• Profile before adding useMemo/useCallback

❌ Don't

• Reach for class lifecycle methods in new code
• Merge unrelated logic into one giant effect
• Assume a double-run in dev is a bug — fix the missing cleanup instead
• Set state after unmount (that's what the guard flag prevents)
• Sprinkle memoization everywhere "just in case"

Summary

📚 Additional Resources

• react.dev — Lifecycle of Reactive Effects
• react.dev — Class lifecycle methods (legacy reference)
• react.dev — useMemo reference
• react.dev — useCallback reference

🚀 What's Next?

You now understand how components live and how effects sync with each phase. Next we make components truly interactive by handling user input directly: Event Handling in React — clicks, form submissions, keyboard input, and the synthetic event system that ties it all together.