iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
When React state or props change, React schedules rendering, runs the affected component again, compares its new output with the previous result, and commits the DOM changes it determines are needed. A component rendering again does not mean React rebuilds the entire page.
What happens after a state update?
Consider a counter whose button displays 0. When its state changes to 1, the component runs again and produces a new element description, such as <button>1</button>. React then reconciles that result with the previous one and commits the necessary DOM update.
- React schedules a render. A state or props change prompts React to schedule rendering.
- The component runs again. Its function executes with the updated state or props and returns its current output.
- React reconciles the output. It compares the new element tree with the prior result to determine what needs to change.
- React commits necessary DOM changes. The browser-facing update is applied; React does not recreate every DOM node merely because a component rendered again.
This distinction matters: a render is the component producing an updated description of the UI, while a commit is when React applies the changes it determined were needed. The source article, Alaa Samy’s “🔥 30 Days of Frontend – Day 1” on DEV Community, presents this sequence as the practical model for understanding a state change.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Does every re-render cause a performance problem?
No. A component running again is not, by itself, evidence that the application is slow or doing harmful work. The useful question is whether the render led to unnecessary or expensive work in your particular application. Nor should you assume that reconciliation always eliminates DOM work: React may determine that a DOM update is required.
#1 Best Overall
React DevTools Profiler can help you inspect rendering behavior and identify work worth investigating. Measure first, then decide whether optimization is warranted. Samy summarizes the advice as: “Profile first. Optimize second.”
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Should you reach for useMemo, useCallback, or React.memo?
Not just because you noticed a re-render. These are optimization tools to consider after you understand where the work is happening; the source article does not prescribe which one to choose or claim that a particular optimization is always required. Use profiling to guide that decision rather than treating every render as a bug.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
