Skip to main content

Posts

Showing posts from October, 2026

React.memo perform shallow comparsion of objects ie non-primitive data

  React.memo performs a shallow comparison, so nested objects are not compared by their contents. It compares the references of object props using Object.is() . Example jsx const Child = React.memo(({ user }) => { console.log("Child rendered"); return <p>{user.profile.name}</p>; }); Suppose the parent passes this object: jsx const user = { name: "John", profile: { name: "John Doe" } }; Case 1: New outer object, same nested values js const prevUser = { name: "John" , profile: { name: "John Doe" } }; const nextUser = { name: "John" , profile: { name: "John Doe" } }; React compares the user prop references: js Object. is (prevUser, nextUser); // false Result: The component re-renders because the outer object reference changed. React doesn't need to compare the nested properties. Case 2: Same outer object, ...