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?

Check this bro: https://stackoverflow.com/questions/30146105/react-input-defaultvalue-doesnt-update-with-state — Radonirina Maminiaina, May 06 '19 at 07:25
it's in the docs https://reactjs.org/docs/uncontrolled-components.html#default-values — koox00, May 06 '19 at 07:26
Would definitely recommend reading the documentation. But to answer the question, defaultValue is only used for initial rendering. — Bebolicious, May 06 '19 at 07:28

95faf8e76605e973 · Answer 1 · 2020-09-18T01:20:54.440

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

score 3 · Accepted Answer · answered May 06 '19 at 07:25

3

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.

answered May 06 '19 at 07:25

ChrKahl

641
5
25

This means that `` without an `onChange` handler will allow me to change the input value (**uncontrolled component**), while `<textarea value="{initialValue}/">` will not (**controlled component**), right? – tonix May 06 '19 at 08:16
1

Right. To change the value with the `value={..}` property you need to assign a onChangeHandler. – ChrKahl May 06 '19 at 08:21

jayanth · Answer 3 · 2019-05-06T11:28:03.860

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.

edited May 06 '19 at 11:28

answered May 06 '19 at 08:50

jayanth

72
4

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

3 Answers3

using defaultValue prop:

using value prop

Linked