Dev MaxxingBeginnerReact75 sec

Effect

An effect is code in a React component that runs in response to rendering, used for tasks like fetching data or subscribing to an external event, outside the normal render flow.

Mark as completed

Prerequisite: React hook

What matters

Effects are how a component talks to things outside React itself, like network requests or browser APIs, since rendering logic alone shouldn't perform side effects directly.

Example

A component might use an effect to fetch a user's data when it first renders, then update its state once the data arrives.

Common misconception

An effect does not run during the render calculation itself; it runs afterward, once React has updated the screen for that render.

Recall question

Why shouldn't side effects like network requests happen directly during rendering?

Keywords and related concepts