Component vs PureComponent — React Technical Interview Questions & Answers

Component vs PureComponent

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.
  Parent
    │ props (read-only)
    ▼
  Child → UI

Technical Interview Tip: Shallow compare + memo + unstable prop trap.

Code Examples for Component vs PureComponent

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.

How to Explain Component vs PureComponent to an Interviewer

How do you compare Component vs PureComponent on the board? One real difference, one shared idea.

Pure : shallow compare, maybe skip render. React.memo.

What naming trap should you avoid?

Mixing AngularJS with Angular

When would you still pick the other side?

Team skill Existing codebase