What causes a re-render, and when do you need an effect?
Answer out loud or in your head first, then compare.
Answer
React recalculates the view after a state change or a change in a context it uses, among other things. A parent's render can also lead to rendering its children. Calculating the view doesn't mean the whole DOM is rewritten — React can decide many elements need no change.
An effect is needed when I synchronise the app with something external, e.g. a timer or a connection. If I'm only calculating the number of filtered items, I can do that during rendering. In development Strict Mode, the extra runs help find missing cleanup. Instead of turning that mode off straight away, I check whether the connection I create is closed properly.
Why it matters: Connects React basics with practical debugging.
Possible follow-ups: Does changing a ref cause a render? When is an effect unnecessary?
How did it go? Be honest — “Not yet” puts the question on your review list.
Start with
- C-P01 · What is React, and what is a component? — React, Next.js and frontend
- C-P02 · How do props and state differ? — React, Next.js and frontend
- C-P04 · What is useEffect for, and what does the dependency array mean? — React, Next.js and frontend
Further reading
- React: Synchronizing with Effects(opens in a new tab)Docs; accessed 22.10.2026. What Effects are for, cleanup, and protecting against stale results.