score:3

Accepted answer

As long as you change the value that is used in value there won't be any difference. If you won't update the variable and have set a textareas value you can't change the value of the textarea by typing. By using a defaultValue you don't have to update any variable.

score:3

see demo image here

You can edit the input value without onchange event handler when you use default value with the input tag.

If you use value with input tag you need to use onchange event handler to make changes to input value.

Code sample

score:3

I think a good example for this is if you use a hard coded string

using defaultValue prop:

function App(){ 
  return(
    <textarea
      defaultValue="foo" // only by default foo
    />
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

using value prop

function App(){ 
  return(
    <textarea
      value="foo" // will forever be foo
    />
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

So while the snippet below this paragraph might look like it is the same as using value prop because of onChange potentially updating the state value (therefore it looks like it is updating defaultValue prop) - it is not. It is still an uncontrolled component and will update its value directly from the user input. It is simply initialized with the default value of whatever this.state.value is when it is initially rendered.

<textarea
  id="markdown-content"
  onChange={this.handleChange}
  defaultValue={this.state.value}
/>

Related Query

More Query from same tag