Timeline for answer to Correct modification of state arrays in React.js by David Hellsing
Current License: CC BY-SA 4.0
Post Revisions
27 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Jun 20, 2022 at 21:20 | history | edited | isherwood | CC BY-SA 4.0 |
added 7 characters in body
|
| Apr 8, 2020 at 22:25 | comment | added | Oliver D |
How can i prevent the duplicate after contacting two arrays when setState? i use this way this.state.arrayvar.concat([newelement])
|
|
| May 13, 2019 at 15:18 | comment | added | CME64 | what about not using push but instead inserting in the middle using splice, we know splice affects the array itself. do we need to copy it using slice(0) and then splice it and assign it? does this seem reasonable resource optimization? why not modify it directly then setting any random state to update it, won't it make the same effect? | |
| Nov 9, 2018 at 10:04 | comment | added | AKJ | @David Where did the prevState come from and can you explain how the arrow function operates in your example above? | |
| Apr 6, 2018 at 13:19 | history | edited | David Hellsing | CC BY-SA 3.0 |
deleted 158 characters in body
|
| Feb 28, 2018 at 14:19 | comment | added | NealeU | This answer really does need updating to put the callback approach first, otherwise it's doing people a disservice. Perhaps I'll try another edit having had my attempt to underline the risks that @ChristopherCamps pointed out, reverted by the author. | |
| S Feb 27, 2018 at 15:28 | history | rollback | David Hellsing |
Rollback to Revision 5 - Edit approval overridden by post owner or moderator
|
|
| Feb 23, 2018 at 18:23 | history | suggested | NealeU | CC BY-SA 3.0 |
Point out functional style is about batching of updates. Full disclosure: it refers to my answer.
|
| Feb 23, 2018 at 17:22 | review | Suggested edits | |||
| S Feb 27, 2018 at 15:28 | |||||
| Sep 5, 2017 at 8:00 | history | edited | David Hellsing | CC BY-SA 3.0 |
added 2 characters in body
|
| Aug 31, 2017 at 9:52 | history | edited | David Hellsing | CC BY-SA 3.0 |
Syntax alternatives
|
| Mar 3, 2017 at 16:59 | comment | added | basicdays |
Now with objects! let obj = Object.assign({}, this.state.obj); obj.woo = 'wow'; this.setState({obj});
|
|
| Mar 3, 2017 at 16:57 | comment | added | basicdays |
An easy way to treat a state array as immutable these days is: let list = Array.from(this.state.list); list.push('woo'); this.setState({list}); Modify to your style preferences of course.
|
|
| Feb 9, 2017 at 17:33 | comment | added | Christopher Camps |
@David I would advise updating your answer to include @NealeU's version also. Here's how I would do it now to avoid mutating anything AND be safe for repeat calls: this.setState(state => ({ ...state, arrayvar: state.arrayvar.concat([newelement]) }));
|
|
| Feb 8, 2017 at 12:34 | comment | added | David Hellsing |
@ChristopherCamps This answer does not encourage calling setState twice, it shows two similar examples of setting state array without mutating it directly.
|
|
| Jan 8, 2017 at 3:37 | comment | added | vish | See @NealeU's answer below for the correct way to handle the race condition that ChristopherCamps mentions. That seems like a more robust way to handle lists in general. | |
| Dec 21, 2016 at 13:20 | history | edited | David Hellsing | CC BY-SA 3.0 |
added 141 characters in body
|
| Dec 21, 2016 at 13:06 | comment | added | David Hellsing | @mindeavor say you have an animationFrame that looks for parameters in this.state, and another method that changes some other parameters on state change. There could be some frames where the state has changed but not reflected in the method that listens for the change, because setState is async. | |
| Mar 2, 2016 at 18:00 | comment | added | rhzs |
@ChristopherCamps I think that's another discussion. You can treat the second setState as callback from the first setState. Example in ES6 syntax: this.SetState({ arr: this.state.arr.push(item)}, () => { this.setState({ this.state.arr.push(item2)}) })
|
|
| Jul 1, 2015 at 9:34 | comment | added | David Hellsing |
@Qiming push returns the new array length so that won’t work. Also, setState is async and React can queue several state changes into a single render pass.
|
|
| Jun 30, 2015 at 6:30 | comment | added | Qiming |
Even though the original reference gets changed, the setState call will call the render pass again, and unless you have something like PureRenderMixin turned on, you'll get your new render just fine. Is there anything else inherently wrong with this.setState({arr: this.state.arr.push(item)})?
|
|
| May 12, 2015 at 8:46 | comment | added | David Hellsing | @VitalyB In that case, use underscore/jquery extend or some immutable library (like react immutability helper) instead of concat. | |
| May 11, 2015 at 21:57 | comment | added | VitalyB |
Note that this answer only applies in case you want only to add/remove items. If you wanted to update elements in the array, you could get in trouble if it held objects. Consider this code: var a = [1,2,3, {a:1}]; var b = a.slice(); b[3].a = 2; console.log(a[3].a);
|
|
| Feb 11, 2015 at 2:12 | comment | added | soundly_typed | Can you provide an example of when a race condition would occur? | |
| Oct 23, 2014 at 20:14 | history | edited | David Hellsing | CC BY-SA 3.0 |
added 100 characters in body
|
| Oct 8, 2014 at 10:11 | vote | accept | fadedbee | ||
| Oct 8, 2014 at 9:56 | history | answered | David Hellsing | CC BY-SA 3.0 |