/**
 * Creates new React Element on each re-render.
 * From https://github.com/facebook/react/blob/v16.13.1/packages/react-reconciler/src/ReactChildFiber.js#L844
 * to https://github.com/facebook/react/blob/v16.13.1/packages/react-reconciler/src/ReactChildFiber.js#L407
 *
 * Element type changes (reference equality, current.elementType === element.type):
 * -> Reconciliation sees it as a new component and replaces it and its children
 * -> Children lose their current state
 */
function FaultyReusableComponent(props) {
    const NestedComponent = () => (
        <div>
            <BlockText>NestedComponent</BlockText>
            {props.children}
        </div>
    );

    return (
        <div className="reusable-component reusable-component--faulty">
            <h2>Faulty Reusable Component</h2>
            <NestedComponent />
        </div>
    );
}

const OutsideDefinedSubComponent = (props) => (
    <div>
        <BlockText>OutsideDefinedSubComponent</BlockText>
        {props.children}
    </div>
);

function WorkingReusableComponent(props) {
    return (
        <div className="reusable-component">
            <h2>Working Reusable Component</h2>
            <OutsideDefinedSubComponent {...props} />
        </div>
    );
}

function App() {
    const [count, increase] = React.useReducer((s) => s + 1, 0);

    return (
        <div>
            <HelpText />

            <div>
                Count is {count} &nbsp;
                <button onClick={increase}>Increase</button>
                <HelperButton />
            </div>

            {/*
             * Notice how we are passing the same StatefulComponent to both
             * FaultyReusableComponent and WorkingReusableComponent.
             * However in FaultyReusableComponent the child keeps losing its state
             * when parent updates. WorkingReusableComponent works just fine!
             */}
            <FaultyReusableComponent>
                <StatefulComponent />
            </FaultyReusableComponent>

            <WorkingReusableComponent>
                <StatefulComponent />
            </WorkingReusableComponent>
        </div>
    );
}

function StatefulComponent() {
    const [value, onChange] = React.useState("Change me and click increase");

    return (
        <input
            type="text"
            value={value}
            onChange={(event) => onChange(event.target.value)}
        />
    );
}

/* Unrelated helpers below */

const HelpText = () => (
    <BlockText>
        Change texts and click increase
        <br />
        Expected: Texts do not reset
        <br />
        Actual: Faulty component resets its child's state
    </BlockText>
);
const BlockText = ({ children }) => <p className="block-text">{children}</p>;

const HelperButton = () => (
    <button
        onClick={() => {
            document
                .querySelectorAll("#root input[type=text]")
                .forEach((input) => {
                    Object.getOwnPropertyDescriptor(
                        window.HTMLInputElement.prototype,
                        "value"
                    ).set.call(input, "New text");
                    input.dispatchEvent(new Event("input", { bubbles: true }));
                });
        }}
    >
        Change all
    </button>
);

ReactDOM.render(<App />, document.getElementById("root"));