【React】onChangeなしでcheckedを使ったら警告がでた

onChangeハンドラーのないチェックボックスにcheckedpropsを設定すると、以下の警告が発生した

Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

onChangeハンドラーのないチェックボックスに初期値を渡したいのならcheckedではなく、defaultCheckedを使えという内容（もしくはonChangeをつけるか、完全に読み取り専用にする）

この理由が気になったので調べた

理由は非制御コンポーネントの初期値と区別するため

チェックボックスにonChangeハンドラーがないということはつまりフィールド自体は読み取り専用であることを意味している

ただ、これをrefをつかった非制御コンポーネントとして宣言した場合は、外部から変更をすることが可能である

import { useRef } from 'react';

const MyComponent = () => {
  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.checked);
  };

  return (
    <div>
      <input
        ref={ref}
        type="checkbox"
        id="subscribe"
        name="subscribe"
        defaultChecked={true}
      />

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

このとき非制御コンポーネントでは、React に初期値を指定したいが、後続の更新処理には関与しないようにしたい

これを制御コンポーネントと区別するために、checked の代わりに defaultChecked 属性を指定する必要があるというのが理由

これを使うとコンポーネントのマウント後に defaultChecked 属性の値を変更しても DOM 内の値の更新は引き起こされることがないとのこと

非制御コンポーネント – React