Skip to content

Commit 0f354f4

Browse files
committed
fix inconsistent updates to react component state
Executions of setState() may be batched, and so updates to this.state and this.props can be asynchronous, so references to this.state and this.props should not be made in the new state, and instead the callback form of setState() should be used. These alerts were found using lgtm.com: https://lgtm.com/projects/g/BoostIO/Boostnote/alerts/?mode=tree&ruleFocus=1819283066 see: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
1 parent d6c3490 commit 0f354f4

File tree

2 files changed

+21
-21
lines changed

2 files changed

+21
-21
lines changed

browser/components/SnippetTab.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,10 @@ class SnippetTab extends React.Component {
5555
this.handleRename()
5656
break
5757
case 27:
58-
this.setState({
59-
name: this.props.snippet.name,
58+
this.setState((prevState, props) => ({
59+
name: props.snippet.name,
6060
isRenaming: false
61-
})
61+
}))
6262
break
6363
}
6464
}

browser/main/Detail/SnippetNoteDetail.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -368,11 +368,11 @@ class SnippetNoteDetail extends React.Component {
368368
name: mode
369369
})
370370
}
371-
this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
371+
this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
372372

373-
this.setState({
374-
note: this.state.note
375-
}, () => {
373+
this.setState(state => ({
374+
note: state.note
375+
}), () => {
376376
this.save()
377377
})
378378
}
@@ -381,11 +381,11 @@ class SnippetNoteDetail extends React.Component {
381381
return (e) => {
382382
const snippets = this.state.note.snippets.slice()
383383
snippets[index].mode = name
384-
this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
384+
this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
385385

386-
this.setState({
387-
note: this.state.note
388-
}, () => {
386+
this.setState(state => ({
387+
note: state.note
388+
}), () => {
389389
this.save()
390390
})
391391

@@ -399,10 +399,10 @@ class SnippetNoteDetail extends React.Component {
399399
return (e) => {
400400
const snippets = this.state.note.snippets.slice()
401401
snippets[index].content = this.refs['code-' + index].value
402-
this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
403-
this.setState({
404-
note: this.state.note
405-
}, () => {
402+
this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
403+
this.setState(state => ({
404+
note: state.note
405+
}), () => {
406406
this.save()
407407
})
408408
}
@@ -597,17 +597,17 @@ class SnippetNoteDetail extends React.Component {
597597
}
598598

599599
jumpNextTab () {
600-
this.setState({
601-
snippetIndex: (this.state.snippetIndex + 1) % this.state.note.snippets.length
602-
}, () => {
600+
this.setState(state => ({
601+
snippetIndex: (state.snippetIndex + 1) % state.note.snippets.length
602+
}), () => {
603603
this.focusEditor()
604604
})
605605
}
606606

607607
jumpPrevTab () {
608-
this.setState({
609-
snippetIndex: (this.state.snippetIndex - 1 + this.state.note.snippets.length) % this.state.note.snippets.length
610-
}, () => {
608+
this.setState(state => ({
609+
snippetIndex: (state.snippetIndex - 1 + state.note.snippets.length) % state.note.snippets.length
610+
}), () => {
611611
this.focusEditor()
612612
})
613613
}

0 commit comments

Comments
 (0)