Is this.state current when the setState updater is called? - reactjs

Question

I understand that a fully updated state is passed to setState's callback. I would like to know, though, if this.state is also current at that time. The reason being that I have a method which uses this.state, and I'd like to know if it's safe to call from inside the callback. Example:
areWeBigger = () => {
const { theirSize } = this.props;
const { ourSize } = this.state;
return ourSize > theirSize;
};
attemptToEat = () => {
this.setState(({ ourSize }) => {
const bigger = this.areWeBigger(); // Is this safe?
return { ourSize: bigger ? ourSize + 1 : ourSize - 1 };
});
};
EDIT
I realize now that what I've been calling the "callback" is actually called the "updater". Sorry for the confusion.

Answer 1

I think it should work. The syntax is also a bit different from what you have used. You are not using the callback in the above example, but rather using the functional convention of setState method. Please refer React JS Documentation for more information about the same. Also, the following snippet might present a better approach towards what you are trying to achieve.
const areWeBigger = () => {
const { theirSize } = this.props;
const { ourSize } = this.state;
return ourSize > theirSize;
};
const attemptToEat = () => {
this.setState({ ourSize: "whatever value" }, () => {
const bigger = this.areWeBigger(); // it is okay to use this
// it doesn't return anything, that is not supported so remove your return statement
// ideally you can also use componentDidUpdate lifecycle method if you don't want to always trigger a callback, you can refer react docs.
})
});
};

Answer 2

It seems you don't need setState callback in your case.
From here, you can call setState like this:
this.setState((prevState, props) => {
return {counter: prevState.counter + props.step};
})
So you can call your areWeBigger function like this:
areWeBigger = (ourSize , theirSize ) => {
return ourSize > theirSize;
};
attemptToEat = () => {
this.setState(({ ourSize }, {theirSize }) => { //extract ourSize and theiSize from (current)state and props respectively
const bigger = this.areWeBigger(ourSize, theirSize ); // this is before the state is updated
return { ourSize: bigger ? ourSize + 1 : ourSize - 1 };
});
};
To keep it in your way with direct state access in "areWeBigger":
areWeBigger = () => {
const {ourSize} = this.state;
const {theirSize} = this.props;
return ourSize > theirSize;
};
callback = () => {
// ... here the state is up to date
}
attemptToEat = () => {
this.setState(({ ourSize }) => { //extract ourSize and theiSize from (current)state and props respectively
const bigger = this.areWeBigger(); // this is before the state is updated
return { ourSize: bigger ? ourSize + 1 : ourSize - 1 };
}, callback); // to see the use of callback
};