What is the real difference between value and defaultValue in React JS?

Question

on the homepage of React, there's the last example (A Component Using External Plugins) with a textarea:

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

As I type, the textarea gets updated.

Now, I tried to change defaultValue with value:

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

And the outcome is the same (as with defaultValue, i.e. as I type, the textarea gets updated visually with the updated text).

So, what is the real difference between the two?

Answer 1

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}
/>