Значения input полей по умолчанию в React

В статьях "Инпуты в стейтах React" и "Чекбоксы и радио кнопки в стейтах React" были рассмотрены примеры код для работы с input элементами типа text, radio, checkbox.

Как можно было заметить, React накладывает свои ограничения на использование простых html атрибутов. Поэтому для установки значений по умолчанию для полей ввода text, radio, checkbox требуется использовать специальный атрибут.

При работе с типом поля text (и подобными) необходимо использовать атрибут "defaultValue" для задания значения по умолчанию. В обычном HTML этот атрибут работает как "value":

import React, { useState } from 'react';

function App() {
   const [value, setValue] = useState('Тише, мыши, кот на крыше');

   return <div>
      <input defaultValue={value} />
   </div>;
}

export default App;

Если же требуется установить выделение на полях типа radio или checkbox, то нужно воспользоваться атрибутом "defaultChecked", который равняется логическому значению "true" (элемент выбран) или "false" (элемент не выбран).

import React, { useState } from 'react';

function App() {
   const [checked, setChecked] = useState(true);

   return <div>
      <input type="checkbox" defaultChecked={checked} />
      <input type="radio" defaultChecked={checked} />
   </div>;
}

export default App;