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?

it's in the docs reactjs.org/docs/uncontrolled-components.html#default-values — koox00
– koox00, Commented May 6, 2019 at 7:26
Would definitely recommend reading the documentation. But to answer the question, defaultValue is only used for initial rendering. — Bebolicious
– Bebolicious, Commented May 6, 2019 at 7:28

95faf8e76605e973 · Accepted Answer · 2020-09-18 01:20:54Z

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

ChrKahl · Accepted Answer · 2019-05-06 07:25:24Z

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 6, 2019 at 7:25

ChrKahl

6516 silver badges26 bronze badges

2 Comments

tonix Over a year ago

This means that <textarea defaultValue={initialValue}/> without an onChange handler will allow me to change the input value (uncontrolled component), while <textarea value={initialValue}/> will not (controlled component), right?

ChrKahl Over a year ago

Right. To change the value with the value={..} property you need to assign a onChangeHandler.

jayanth · Accepted Answer · 2019-05-06 11:28:03Z

2

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 6, 2019 at 11:28

answered May 6, 2019 at 8:50

jayanth

624 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

using defaultValue prop:

using value prop

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

using defaultValue prop:

using value prop

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related