フォーカスが消えるのか消えないのか

問題のコード

以下のAppをレンダリングしたとき、入力欄をダブルクリックしたらフォーカスはどうなるでしょうか？

import { useState } from "react";

type InputProps = {
  onDoubleClick: () => void;
  borderColor: "red" | "green";
};
function Input1({ borderColor, onDoubleClick }: InputProps) {
  return (
    <input
      style={{ border: `4px solid ${borderColor}` }}
      onDoubleClick={onDoubleClick}
    />
  );
}
// コンポーネント名が違うだけでInput1と全く同じ中身
function Input2({ borderColor, onDoubleClick }: InputProps) {
  return (
    <input
      style={{ border: `4px solid ${borderColor}` }}
      onDoubleClick={onDoubleClick}
    />
  );
}

export default function App() {
  const [mode, setMode] = useState<"mode1" | "mode2">("mode1");

  return (
    <main>
      {mode === "mode1" ? (
        <Input1
          borderColor={"red"}
          onDoubleClick={() => {
            setMode("mode2");
          }}
        />
      ) : (
        <Input2
          borderColor={"green"}
          onDoubleClick={() => {
            setMode("mode1");
          }}
        />
      )}
    </main>
  );
}

正解は、「フォーカスが消える」です。これはReactがInput1とInput2を異なるコンポーネントと認識するため、モードが切り替わった際に古いコンポーネントがアンマウントされ、新しいコンポーネントがマウントされるからです。

追加の調査

では以下のコードではどうでしょうか？

import { useState } from "react";

export default function App() {
  const [mode, setMode] = useState<"mode1" | "mode2">("mode1");

  return (
    <main>
      {mode === "mode1" ? (
        <input
          style={{ border: "4px solid red" }}
          onDoubleClick={() => {
            setMode("mode2");
          }}
        />
      ) : (
        <input
          style={{ border: "4px solid green" }}
          onDoubleClick={() => {
            setMode("mode1");
          }}
        />
      )}
    </main>
  );
}

こちらは「フォーカスが消えない」です。

Reactが同じ位置に同じ種類のHTML要素がレンダリングされると判断し、既存のDOM要素を再利用するためです。

次の例は以下のコードです。

import { useState } from "react";

type InputProps = {
  onDoubleClick: () => void;
  borderColor: "red" | "green";
};
function Input1({ borderColor, onDoubleClick }: InputProps) {
  return (
    <input
      style={{ border: `4px solid ${borderColor}` }}
      onDoubleClick={onDoubleClick}
    />
  );
}

export default function App() {
  const [mode, setMode] = useState<"mode1" | "mode2">("mode1");

  return (
    <main>
      {mode === "mode1" ? (
        <Input1
          borderColor={"red"}
          onDoubleClick={() => {
            setMode("mode2");
          }}
        />
      ) : (
        <Input1
          borderColor={"green"}
          onDoubleClick={() => {
            setMode("mode1");
          }}
        />
      )}
    </main>
  );
}

こちらは「フォーカスが消えない」です。

こちらもReactが同じ位置に同じ型のコンポーネントがレンダリングされると判断し、既存のコンポーネントインスタンスを再利用するためです。

では、それぞれに別のキーを渡した以下のコードではどうなるでしょうか？

import { useState } from "react";

type InputProps = {
  onDoubleClick: () => void;
  borderColor: "red" | "green";
};
function Input1({ borderColor, onDoubleClick }: InputProps) {
  return (
    <input
      style={{ border: `4px solid ${borderColor}` }}
      onDoubleClick={onDoubleClick}
    />
  );
}

export default function App() {
  const [mode, setMode] = useState<"mode1" | "mode2">("mode1");

  return (
    <main>
      {mode === "mode1" ? (
        <Input1
          key={"mode1"}
          borderColor={"red"}
          onDoubleClick={() => {
            setMode("mode2");
          }}
        />
      ) : (
        <Input1
          key={"mode2"}
          borderColor={"green"}
          onDoubleClick={() => {
            setMode("mode1");
          }}
        />
      )}
    </main>
  );
}