メディアリストのUIリニューアル後に発生したフロントエンドのバグとその解決

// Before

type Props = {
	readonly isOpen: boolean;
  readonly onClose: () => void;
  readonly onOpenChange: (open: boolean) => void;
}

function MediaListJoinDrawer({
  isOpen,
  onClose,
  onOpenChange,
}: Props) {
  const [mediaListTitle, setMediaListTitle] = useState('');

  // ドロワーが閉じられた際中身は破棄されるが、
  // mediaListTitleはこのコンポーネントにあるため破棄されない。
  return (
    <MediaListDrawer
      isOpen={isOpen}
      onOpenChange={onOpenChange}
      onClose={onClose}
    >
      <div>
        <h2>{mediaListTitle}</h2>
        <input 
          type="text"
          onChange={(event) => {
            setMediaListTitle(event.target.value)
          }
        }>
        {/* ... */}
      </div>
    </MediaListDrawer>
  );
}

// After

type Props = {
  readonly isOpen: boolean;
  readonly onClose: () => void;
  readonly onOpenChange: (open: boolean) => void;
};

function MediaListJoinDrawer({isOpen, onClose, onOpenChange}: Props) {
  return (
    <MediaListDrawer
      isOpen={isOpen}
      onOpenChange={onOpenChange}
      onClose={onClose}
    >
      <MediaListJoinDrawerContainer />
    </MediaListDrawer>
  );
}

function MediaListJoinDrawerContainer() {
  const [mediaListTitle, setMediaListTitle] = useState('');

  // MediaListDrawerの入れ子なので、ドロワーが閉じられた際破棄される。
  return (
    <div>
      <h2>{mediaListTitle}</h2>
      <input
        type='text'
        onChange={(event) => {
          setMediaListTitle(event.target.value);
        }}
      />
      {/* ... */}
    </div>
  );
}

function MediaListPage() {
  const [mediaListTableKeyFlag, setMediaListTableKeyFlag] = useState(false);

  return (
    <div>
      {/* ... */}
      <MediaListEditDrawer
        mediaListTableKey={mediaListTableKeyFlag ? 'key1' : 'key2'}
      />
      <MediaListEditDrawer
        onRestore={() => {
          // 復元ボタンがクリックされた時、keyを切り替える
          setMediaListTableKey((previous) => !previous);
        }}
      />
    </div>
  );
}

function MediaListEditDrawer({
  mediaListTableKey,
}: {
  readonly mediaListTableKey: string;
}) {
  return (
    <MediaListDrawer>
      {/* ... */}
      <div>
        <MediaListTable key={mediaListTableKey} />
      </div>
    </MediaListDrawer>
  );
}