You addItem/removeItem has a fairly unlikely race condition in it.
You are reading the list from the state, modifying it, then using this.setState. However, this.setState does not update the state immediately.
In theory, addItem could get called twice in quick succession, and you would lose one of the items added. For example with this possible ordering of events:
Initial List ["a", "b", "c"]
addItem Called with "d", modified list ["a", "b", "c", "d"], setState called
addItem called with "e", modified list ["a", "b", "c", "e"], setState called
I’m a full stack developer who has experience with several front-end tools like Reactjs, Vuejs, and jQuery as well as some back-end tools like PHP, Laravel, Node, and Express.
Location
IL
Education
AAS in Information Technology/Web Development
Work
Senior Software Development Engineer at Wizards of the Coast
Thanks for the article.
You
addItem
/removeItem
has a fairly unlikely race condition in it.You are reading the
list
from the state, modifying it, then usingthis.setState
. However,this.setState
does not update the state immediately.In theory,
addItem
could get called twice in quick succession, and you would lose one of the items added. For example with this possible ordering of events:addItem
Called with "d", modified list["a", "b", "c", "d"]
,setState
calledaddItem
called with "e", modified list["a", "b", "c", "e"]
,setState
called["a", "b", "c", "d"]
["a", "b", "c", "e"]
Just something to keep in mind.
Interesting. How would you suggest preventing that issue in a project like this?
Use call back format for setState.