3-6y

Hooks, Especially useEffect

useState stores local data. useEffect is for work outside render, like fetching, subscriptions, timers, or syncing to browser APIs.

Analogy

Render is writing homework. useEffect is stepping outside to submit it, listen for updates, or clean the board later.

Follow-up questions

Topic practice prompts

When should you use useEffect and when should you avoid it?

Use it for side effects like fetches, subscriptions, timers, or syncing with external systems. Avoid it for values you can derive during render.

  • How do you prevent race conditions?
  • What should cleanup do?
What is a stale closure bug in React?

It happens when a callback or effect keeps an old value from a previous render and later uses outdated state or props.

  • How can functional state updates help?
  • When would you use a ref?
Cheat sheet

Last-day revision lines

  • useState for local data.
  • useEffect for network, subscriptions, timers, DOM sync.
  • Abort async work on change.
  • Keep effect scope narrow.
Source references
  • React interview questions ebook: context/React interview questions- Ebook.docx
  • Frontend resources gold mine: context/Resources to learn Frontend (Gold Mine)- eBook .docx
Offline study support

Local resource packs for this topic

2 local packs

Use these local packs when you want broader official-source context without leaving the app.

reactOfficial React mental models

React Core Mental Models

A local digest of the React ideas that most often decide whether your answer sounds modern or outdated.

React.js

Rendering, state updates, re-renders, and explaining React without vague virtual-DOM-only answers.

Open local study pack
reactOfficial React effects and state flow

React Effects and Data Flow

A local study pack for useEffect, shared state, and the difference between side effects and derived data.

React.jsFrontend System Design

Modern React interview rounds that test whether you overuse effects or design state carefully.

Open local study pack
Next step

Related topics to study after this one

React.js3-6y

State Modeling and Data Flow

Choose between local state, lifted state, reducers, context, and server state cleanly.

Simple mode, interview mode, example, pitfalls, and follow-ups are all inside this topic.

stateuseReducercontextarchitecture
Study topic
React.js3-6y

React Performance Toolkit

Measure first, then reduce render surface, expensive work, and bundle cost.

Simple mode, interview mode, example, pitfalls, and follow-ups are all inside this topic.

performancememoizationprofilingbundle
Study topic