React · Theory

Component vs PureComponent

Theory

71/94

Component vs PureComponent

Component re-renders when the parent says so. PureComponent implements shouldComponentUpdate with a shallow compare of props and state — skip if nothing shallow-changed. Function version: React.memo(Comp). New object/array props (style={{}}) still look ‘different’ every time — memo won’t help until you stabilize props.

Component vs PureComponent — output — three lines. New object props {{}} still break PureComponent. Same trap as memo.

Diagram

Parent
    │ props (read-only)
    ▼
  Child → UI

Exam tip

Shallow compare + memo + unstable prop trap.

Example

// PureComponent
console.log("Component: re-render when parent renders");
console.log("PureComponent: skip if props/state shallow-equal");
console.log("function : React.memo(Comp)");

Component vs PureComponent — output: three lines. New object props {{}} still break PureComponent. Same trap as memo.

Short notes

Pure : shallow compare, maybe skip render.
Fn : React.memo.
Trapnew {{}} props every render.

React · Theory

Component vs PureComponent

← All stacks

Theory

71/94

Component vs PureComponent

Component vs PureComponent — output — three lines. New object props {{}} still break PureComponent. Same trap as memo.

Diagram

Parent
    │ props (read-only)
    ▼
  Child → UI

Exam tip

Shallow compare + memo + unstable prop trap.

Example

// PureComponent
console.log("Component: re-render when parent renders");
console.log("PureComponent: skip if props/state shallow-equal");
console.log("function : React.memo(Comp)");

Component vs PureComponent — output: three lines. New object props {{}} still break PureComponent. Same trap as memo.

Short notes

Pure : shallow compare, maybe skip render.
Fn : React.memo.
Trapnew {{}} props every render.

Component vs PureComponent

Example

Short notes

Questions

Component vs PureComponent

Example

Short notes

Questions