Skip to content

Commit 552014a

Browse files
committed
Fix the issue of sudheerj#254
1 parent 0057256 commit 552014a

File tree

1 file changed

+29
-7
lines changed

1 file changed

+29
-7
lines changed

Diff for: README.md

+29-7
Original file line numberDiff line numberDiff line change
@@ -773,14 +773,36 @@
773773
774774
12. ### What is the purpose of callback function as an argument of `setState()`?
775775
776-
The callback function is invoked when setState finished and the component gets rendered. Since `setState()` is **asynchronous** the callback function is used for any post action.
776+
`SetState` is an `asynchronous method`. `Asynchronous` means that the remaining code will get executed while the current action is being performed. Whereas `synchronous` code will block the code execution while the current action is being performed. So, if you want an action to be performed only after the state has been updated you can make use of a call back function. This `callback function` is put as an argument to setstate method. This is the exact purpose of defining a callback function as an argument of setState.
777777

778-
**Note:** It is recommended to use lifecycle method rather than this callback function.
779-
780-
```javascript
781-
setState({ name: "John" }, () =>
782-
console.log("The name has updated and component re-rendered")
783-
);
778+
```jsx
779+
import React from "react";
780+
781+
class App extends React.Component {
782+
constructor() {
783+
super();
784+
this.state = {
785+
value: 0
786+
}
787+
}
788+
789+
call() {
790+
this.setState({ value: this.state.value + 1 }, () =>
791+
console.log("Updated Value :" + this.state.value)
792+
);
793+
}
794+
795+
render() {
796+
return (
797+
<div>
798+
<button onClick={() => { this.call() }}>
799+
Click to update state!
800+
</button>
801+
</div>
802+
);
803+
}
804+
}
805+
export default App;
784806
```
785807
786808
**[⬆ Back to Top](#table-of-contents)**

0 commit comments

Comments
 (0)