Prevent child component from unmounting and remounting if parent component changes

Question

Problem:

In the code below, when the Toggle ParentA/B button is clicked, the <Child /> component will be unmounted and remounted again, only though effectively only the Parent component changed.

How do I prevent Child from unmounting and remounting in such a situation?

import React, { useState } from "react"

const App = () => {
    const [a, setA] = useState(true)
    return (
        <div>
            <button onClick={() => setA(!a)}>Toggle ParentA/B</button>
            {a ? <ParentA><Child /></ParentA> : <ParentB><Child /></ParentB>}
        </div>
    )
}
const ParentA = ({ children }) => <div>parentA{children}</div>
const ParentB = ({ children }) => <div>parentB{children}</div>

class Child extends React.Component {
    componentDidMount() {
        console.log('child did mount')
    }

    componentWillUnmount() {
        console.log('child will unmount')

    }

    render() {
        return (
            <div>child</div>
        )
    }

}

export default App

---

Replies to potential answers:

Why not just let the Child component remount since it's only a <div> element?

Normally this wouldn't matter if the Child component renders cheaply. However, in my case, the Child component takes very long to mount, so I cannot afford a remounting every time the Parent component changes.

You could pass the parentA or parentB string as props to a generic Parent component.

const App = () => {
    const [a, setA] = useState(true)
    return (
        <div>
            <button onClick={() => setA(!a)}>Toggle ParentA/B</button>
            <ParentGeneric content={a? 'parentA': 'parentB'}><Child /></ParentGeneric>
        </div>
    )
}
const ParentGeneric = ({children, content}) => <div>{content}{children}</div>

class Child extends React.Component {
    ...
}

This would work. Unfortunately, this restricts my Parent component's JSX structure to be identical. In other words, if my ParentA and ParentB's JSX structure were different, then I'm not sure how to pass the difference as props.

For example:

const ParentA = ({ children }) => <div><div><h1>parentA{children}</h1></div></div>
const ParentB = ({ children }) => <div>parentB{children}</div>

If parentA and parentB are defined this way, would it still be possible to abstract these two components into a ParentGeneric component and simply passing the structural difference between ParentA and ParentB as props?

Answer 1

This isn't much in the way of a technical answer but there are reparenting libraries out there which can supposedly accomplish this: react-reverse-portal and react-reparenting.

I looked into it myself recently but they are somewhat experimental and it seemed like a lot of overhead to worry about. The answer from @deckele looks like a much better solution if you don't literally need to move the component across multiple branches.

Answer 2

It's impossible, and clearly defined here (emphasis mine):

There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the state of the art algorithms have a complexity in the order of O(n³) where n is the number of elements in the tree.

If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:

1. Two elements of different types will produce different trees.

2. The developer can hint at which child elements may be stable across different renders with a key prop.

In practice, these assumptions are valid for almost all practical use cases.

If React would've diffed children of different parent types it would've slowed down the whole conciliation process by magnitudes.

So you're left with your proposed solution of a generic parent with props.