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 oute 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?

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 oute 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?

• javascript
• reactjs

• 1 Check this bro: stackoverflow./questions/30146105/… – Radonirina Maminiaina Commented May 6, 2019 at 7:25
• 3 it's in the docs reactjs/docs/uncontrolled-ponents.html#default-values – koox00 Commented May 6, 2019 at 7:26
• 2 Would definitely remend reading the documentation. But to answer the question, defaultValue is only used for initial rendering. – Bebolicious Commented May 6, 2019 at 7:28

3 Answers 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./ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./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./ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./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 ponent 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}
/>

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.

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.