Write an Effect and its dependencies

An Effect runs after React commits the updated interface.

import { useEffect } from 'react'

function TaskPage({ tasks }) {
  useEffect(() => {
    document.title = `Tasks: ${tasks.length}`
  }, [tasks.length])

  return <TaskList tasks={tasks} />
}

This Effect keeps the browser document title synchronized with the rendered task count.

The dependency list describes the reactive values the Effect reads. It is not a performance preference. When tasks.length changes, React runs the synchronization again.

React compares dependencies with their values from the previous render. An object or function created during every render is a new reference and can make an Effect rerun. Move unnecessary object creation inside the Effect or simplify the dependency rather than hiding it from the linter.

Do not suppress a dependency warning to force “run once” behavior. The warning often means the Effect reads a value that can become stale.

An empty array means the Effect does not read changing props or state. It does not mean “ignore values I used.”

Change a task title without changing the list length, then add a task. Predict which action updates the document title and confirm it in the browser tab.