← All notes

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).

@misc{iil_note_rsvkgw9f,
  author = {{iinventedlight}},
  title = {{React Effects and useEffect}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/react-effects/},
  note = {Permanent ID iil:note:rsvkgw9f. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/react-effects.md.