liveBook · Manning

Rerender

As explained in React in Depth

rerender is a React Testing Library function that updates an existing rendered component with new props while preserving the mounted instance.

rerender updates an already rendered React component with new props while preserving its mounted instance. This makes it useful for testing prop changes without resetting component state. section 10.2.1

Verify state survives a prop change

Render <Counter start={10} />, call rerender(<Counter start={20} />), then assert that the heading still reads “Counter: 10”. The test demonstrates that changing start does not reinitialize the existing state.

How React in Depth covers it

How deep it goes
Explains extraction, invocation, and state-preservation assertion through a focused counter test.
Examples
Uses a counter initialized at 10, rerendered with start={20}, and checked for the unchanged value 10.
What it assumes
Assumes render, screen, role-based queries, and basic React component state testing.
What you can do after
Apply it via React Testing Library to verify prop changes while preserving component state.
How it connects
Connects React props and state with render, accessible queries, and Arrange-Act-Assert test structure.
Cover of React in Depth
liveBookmanning.com
Read React in Depth on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React in Depth. The section links point to the parts of the book it draws on.