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

Иногда может потребоваться сделать так, чтобы по умолчанию в инпуте уже было какое-то значение. При этом нужно, чтобы из стейта было взято только начальное значение инпута, а сам инпут не был бы привязан к этому стейту.

Для решения такой задачи нужно воспользоваться атрибутом defaultValue:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input defaultValue={value} />
  </div>;
}

Для чекбоксов существует аналогичный атрибут defaultChecked, с помощью которого можно задать начальное:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" defaultChecked={checked} />
  </div>;
}