Login - Jit4All

A React component needs an effect when it must synchronize with something outside normal rendering, such as fetching data, setting a document title, using browser storage, timers, or subscriptions.

State changes the component. Events usually cause state changes.

Sometimes a component must also do something outside the rendered JSX.

React uses useEffect for effects in function components.

import { useEffect, useState } from "react";

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

   useEffect(() => {
      document.title = `Count: ${count}`;
   }, [count]);

   return (
      <section>
         <h2>Count: {count}</h2>

         <button onClick={() => setCount(count + 1)}>
            Add one
         </button>
      </section>
   );
}

useEffect runs code after React renders.

document.title changes something outside the component's JSX.

[count] is the dependency list.

The effect runs again when count changes.

The button changes state, React renders, then the effect updates the browser tab title.

Effects connect React to browser APIs, servers, timers, and other systems.

Effects run after rendering, not while JSX is being calculated.

Data loading, document titles, storage, and subscriptions often use effects.

function CounterTitle() {
   document.title = "Changed during render";

   return <h2>Counter</h2>;
}

useEffect(() => {
   document.title = `Count: ${count}`;
}, [count]);

Ask ChatGPT: "Is this work part of rendering, or is it a side effect that belongs in useEffect?" Then identify what outside system is being touched.

Import useEffect and useState.

Use an effect to update document.title.

Put count in the dependency list.

Using effects for work that can be calculated during render.

Changing state inside an effect in a way that causes an infinite loop.

Touching outside systems directly inside the component render body.

Use React effects to synchronize a component with browser APIs or other outside systems after rendering.