React Reconciliation

Reconciliation.tsx

import { useState, useMemo, useReducer, memo } from "react";

const MyButton = memo(() => {
  const value = useMemo(() => Math.random(), []);
  
  return <button>MyButton {value}</button>;
});

export default function MyApp() {
  const [flag, setFlag] = useState(false);
  const [, forceUpdate] = useReducer((x) => x + 1, 0);

  const buttonElement = <MyButton />;

  return (
    <div>
      <button onClick={forceUpdate}>forceUpdate</button>
      <button onClick={() => setFlag((prevFlag) => !prevFlag)}>change</button>
      {flag ? (
        <div>
          {buttonElement}
        </div>
      ) : (
        <section>
          {buttonElement}
        </section>
      )}
    </div>
  );
}