A prop is an input value passed to a component to configure its rendering or behavior. Props describe component inputs, but they do not independently determine whether the component re-renders: a parent render re-renders its child regardless of which props it receives. section 3.1.1
Treat props as inputs, not as a standalone rendering-control mechanism:
- Expect a child to re-render when its parent re-renders, even when the child receives no props or unchanged props. section 3.1.1
- Do not expect changing a value held in a ref to update the UI or trigger a render merely because that value is passed as a prop. section 3.1.1
- Inspect and manipulate props during debugging; React Developer Tools applies changes immediately and causes the selected component to re-render. section 4.4.3
Testing the prop–render relationship
Render a Rerenderable child beneath a stateful parent and update the parent with setCount; the child re-renders even without props. Then pass count.current from a ref and increment the ref directly; the prop value changes, but the child does not re-render because no render was triggered. 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>;
}
Use the render-highlighting component to make first and subsequent renders visible, then compare it with the two parent components that change state or ref-held prop values. section 3.1.1
