Component re-rendering
Component re-rendering is the repeated execution of a component’s rendering logic to produce updated user-interface output after relevant data changes.
React Quickly, Second Edition
Component re-rendering is the repeated execution of a component's rendering logic to produce updated user-interface output.
- How it is used
- Explains when interactive React components update their output and why a state setter might not visibly change the UI.
- How deep it goes
- Identifies mount, parent render, and stateful-hook updates as triggers, then examines batching, unchanged state, and excessive rendering.
- Examples
- Uses a resettable counter, a broken and repaired to-do list, a parent-rendered child, and a pointer-sensitive background.
- What you can do after
- Diagnose/debug with React Developer Tools and choose state values that produce needed updates without needless renders.
Read how React Quickly, Second Edition explains component re-rendering →
React Hooks in Action: With Suspense and Concurrent Mode
Re-rendering is the process of producing an updated user-interface description after relevant application data changes.
- How it is used
- Uses state changes to keep component output and the displayed interface synchronized.
- How deep it goes
- Explains the state-to-UI cycle, updater behavior, and ref contrast, while avoiding deeper rendering implementation details.
- Examples
- Demonstrates counters, state-backed buttons, ref-backed buttons, question-and-answer displays, and component decomposition in a bookings app.
- What you can do after
- Diagnose stale displays by distinguishing state updates, ref mutations, and component boundaries that trigger re-rendering.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains component re-rendering →
React in Depth
Component re-rendering is the process of rendering a React component again after its relevant inputs or state change.
- How it is used
- Diagnoses React render behavior and frames performance work around unnecessary renders.
- How deep it goes
- Demonstrates render triggers with runnable components and connects them to frame budgets and memoization.
- Examples
- Uses visible render instrumentation, contrasting buttons, a state update, and a ref mutation.
- What you can do after
- Diagnose unexpected renders and choose whether to reduce state updates or apply memoization.
Related concepts
- stateproduced by · State is information or a configuration describing the condition of a system, entity, or computation at a particular time and potentially influencing subsequent behavior or decisions.
- useContextproduced by · useContext is a React Hook that reads the current value of a context from the nearest matching provider or its default value.
- provider patternproduced by · The provider pattern is a design pattern in which a component or service makes shared data or capabilities available to descendant components or dependent consumers.
- parent elementproduced by · A parent element is an entity directly above another entity in a hierarchy, with the latter being its child.
- refcontrasts with · A ref is a mechanism for retaining access to a rendered element, component, or value outside ordinary rendering data flow.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.