Component re-rendering is React’s process of executing a component again to produce updated output. A changed prop is neither necessary nor sufficient: a child re-renders when its parent renders, even with unchanged props, while mutating a ref can change a prop value without triggering a render. section 3.1.1
Use these distinctions when diagnosing render behavior and performance:
- State updates can trigger a parent render and therefore re-render its children, regardless of the children’s props. section 3.1.1
- A ref mutation does not itself schedule a render, so a changed value may not appear in the child’s output. section 3.1.1
- Minimize unnecessary renders when rendering threatens frame time or interface responsiveness; memoization is one available optimization. section 3.2
- Manual memoization remains relevant while the React Compiler is experimental and not widely adopted. section 3.2
Testing the prop-change myth
Render one child beneath a parent whose state update changes nothing passed to that child, then render another child whose prop reads from a mutated ref. The first child re-renders when its parent updates; the second does not re-render when only the ref changes. A visible first-render indicator makes the difference observable. section 3.1.1
Listing 3.1 A component that highlights re-renders
import { useEffect } from "react";
import { useRef } from "react";
export function Rerenderable() {
const isFirst = useRef(true);
useEffect(() => {
isFirst.current = false; #1
}, []);
const style = #2
{ color: isFirst.current ? "red" : "blue" }; #2
const text = isFirst.current #2
? "First render" : "Not first render"; #2
return <p style={style}>{text}</p>;
}
Inspect a small diagnostic component that uses a ref and effect to distinguish its first render from later renders. section 3.1.1
