In the previous version of React, we were able to execute code after the state has changed by using this method:
setState( prevState => {myval: !prevState.myval}, () => {
console.log("myval is changed now");
)
One way to achieve something similar in the current version is by using React.useEffect:
const [myval, setMyval] = React.useState(false);
React.useEffect(() => {
console.log("myval is changed now");
}
//somewhere
setMyval(o => !o);
However, in some cases like mine, determining which action needs to happen after the state change depends on where it occurred originally:
//somewhere
setState( prevState => {myval: !prevState.myval}, () => {
console.log("myval is changed now");
)
//somewhere else
setState( prevState => {myval: !prevState.myval}, () => {
console.log("myval has changed somewhere else");
)
Converting these to useState + setMyval would cause the same effect to fire at both positions, making it difficult to determine the required action using useEffect.
How can I achieve the above functionality in a hook-based function component?
A better scenario would be a screen with two buttons: one for loading previous data and another for loading next data. The buttons should be disabled while the isLoading state is true. To ensure only one load operation happens, we need to prevent a race condition that might occur due to asynchronous state changes.
Using a callback upon changing the state can help prevent this race condition and ensure that only one load operation occurs:
class SomScreen extends React.component {
state = { isLoading: false }
render() {
<div>
<button
disabled={this.state.isLoading}
onclick={(e) => {
if (!this.state.isLoading) {
this.setState((p) => ({isLoading: true}), () => {
await fetchPreviousDataAndDoSomethingWithIt()
setState({isLoading: false});
});
}
}
/>Previous</button>
<button
disabled={this.state.isLoading}
onclick={(e) => {
if (!this.state.isLoading) {
this.setState((p) => ({isLoading: true}), () => {
await fetchNextDataAndDoSomethingWithIt()
setState({isLoading: false});
});
}
}
/>Next</button>
</div>
}
}