Q399: Why is a component constructor called only once? - React & Modern Frontend (445 Qs)

React's reconciliation algorithm assumes that without any information to the contrary, if a custom component appears in the same place on subsequent renders, it's the same component as before, so reuses the previous instance rather than creating a new one.

Code Example

tsx

import React, { useState } from 'react';

class UserCard extends React.Component<{ name: string }> {
  constructor(props: { name: string }) {
    super(props);
    console.log('Constructor executed only ONCE during initial mount for:', props.name);
  }

  render() {
    return <div>Active Profile: {this.props.name}</div>;
  }
}

export function ProfileContainer() {
  const [userName, setUserName] = useState('Alex');

  return (
    <div>
      {/* React reconciler detects identical component type at the same position, */}
      {/* so it updates props and re-renders without re-instantiating the class */}
      <UserCard name={userName} />
      <button onClick={() => setUserName('Jordan')}>Update Name</button>
    </div>
  );
}