Summary - useEffect

Write a hook that listens to window resize.

Summary - useEffect

In this group you learned useEffect. It moves side effects to after render; it runs after every paint, including the first.

The dependency array tells when it runs: [] first render, [deps] on change, none every render. A cleanup function releases resources.

Correct dependencies and cleanup are the key to healthy effects.

Exercise useEffect summary task

Complete the skeleton. Write a Logger component; import useState and useEffect. Define const [n, setN] = useState(0);. Call useEffect(() => { console.log(n); }, [n]);. Return <button onClick={() => setN(n + 1)}>{n}</button>. Export it.

Show example solution

import { useState, useEffect } from "react";

function Logger() {
  const [n, setN] = useState(0);
  useEffect(() => { console.log(n); }, [n]);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

export default Logger;

Test yourself

Which is wrong?
```
Cleanup prevents leaks.
```
- useEffect runs after render
- cleanup is never needed
- [count] runs when count changes
- [] means first render
Show answer

cleanup is never needed — Cleanup is required if a resource was started.
Summary - useEffect: match the terms

useEffect

Effect hook
[]

First render
[deps]

On change
return () => ...

Cleanup

Next lesson: What is context?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies