How does React’s reconciliation handle a component changing from one type to another (e.g., to ) in the same position?

Question

React Developer — Hard

How does React’s reconciliation handle a component changing from one type to another (e.g., to ) in the same position?

Accepted Answer

When a React component changes from one type to another in the same position, React unmounts the old tree and mounts a fresh new tree for the new element type. This ensures that all child state is properly cleaned up and re-rendered.