---
source: https://iinventedlight.com/library/notes/react-effects.md
title: "React Effects and useEffect"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); prose restates or closely paraphrases cited source lines"
license_family: react-docs-ccby
rule_check: "needs rule check (family not in auto-publish rule; check.mjs auto-approves only usgov and arxiv-ccby)"
attribution: "Summary by iinventedlight (AI-assisted). Sources: React docs (react.dev), Synchronizing with Effects – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), useEffect – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-04
as_of: 2026-11-04
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: React"
tags: ['react', 'effects', 'hooks', 'useeffect']
sources:
  - id: S1
    title: "Synchronizing with Effects – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/synchronizing-with-effects
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
  - id: S2
    title: "useEffect – React"
    publisher: React docs (react.dev)
    url: https://react.dev/reference/react/useEffect
    accessed: 2026-11-04
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
---
# React Effects and useEffect

**Answer:** Effects let you run some code after rendering so that you can synchronize your component with some system outside of React. useEffect is a React Hook that lets you synchronize a component with an external system. (S1, S2)

## Effects versus rendering and events

- Rendering code lives at the top level of your component; like a math formula, it should only calculate the result, but not do anything else. (S1)
- Event handlers are nested functions inside your components that do things rather than just calculate them. (S1)
- Effects let you specify side effects that are caused by rendering itself, rather than by a particular event. (S1)
- Sending a message in a chat is an event, while setting up a server connection is an Effect because it should happen no matter which interaction caused the component to appear. (S1)

## Setup, cleanup and dependencies

- When your component commits, React will run your setup function, which may also optionally return a cleanup function. (S2)
- After every commit with changed dependencies, React will first run the cleanup function with the old values, and then run your setup function with the new values. (S2)
- After your component is removed from the DOM, React will run your cleanup function. (S2)
- React will compare each dependency with its previous value using the Object.is comparison. (S2)
- If you omit the dependencies argument, your Effect will re-run after every commit of the component. (S2)
- If you're not trying to synchronize with some external system, you probably don't need an Effect. (S2)

## Claims
- id: C1
  claim: Effects run code after rendering to synchronize with outside systems.
  source: S1
  evidence: "If you don’t want some code to re-run"
- id: C2
  claim: Effects run at the end of a commit after the screen updates.
  source: S1
  evidence: "Effects run at the end of a commit after the screen updates."
- id: C3
  claim: React compares dependencies with Object.is.
  source: S2
  evidence: "React will compare each dependency with its previous value using the Object.is comparison."
- id: C4
  claim: Omitting dependencies re-runs the Effect after every commit.
  source: S2
  evidence: "If you omit this argument, your Effect will re-run after every commit of the component."

## Sources
- [S1] Synchronizing with Effects – React. React docs (react.dev). https://react.dev/learn/synchronizing-with-effects . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.
- [S2] useEffect – React. React docs (react.dev). https://react.dev/reference/react/useEffect . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).