React useState hook with callback - reactjs

Question

I'm having a hard time converting the following methods with setState
sendMsgToMe = () => {
const { senderIdString, senderId } = this.props; //eslint-disable-line
const { messages, counter } = this.state;
let myNumber;
this.setState({
btnSendMeIsDisabled: true,
});
axios
.get(`${appConfig.URL_REST}user`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
})
.then((response) => {
myNumber = response.data.phoneNumber;
this.setState(
{
messageToSend: [
{
from: senderIdString ? senderIdString.number : senderId,
to: myNumber,
message: messages[counter],
},
],
},
this.sendMsgAxios
);
});
};
sendMsgToRecipients = () => {
const { recipientsNmbs, senderIdString, senderId } = this.props;
const { messages, counter } = this.state;
this.setState({
btnSendIsDisabled: true,
});
const msgToSend = recipientsNmbs.map((item) => {
return {
from: senderIdString ? senderIdString.number : senderId,
to: item,
message: messages[counter],
};
});
this.setState(
{
messageToSend: msgToSend,
},
this.sendMsgAxios
);
};
into functions. I saw examples with calling it from useEffect with dependency array but they were more plain.
The main issue in this piece of code
this.setState(
{
messageToSend: [
{
from: senderIdString ? senderIdString.number : senderId,
to: myNumber,
message: messages[counter],
},
],
},
this.sendMsgAxios
);
My questions is how exactly should I call it in useEffect or is there any better approach?

Answer 1

You could use a new state callSendMsgAxios that will trigger sendMsgAxios when sendMsgToMe or sendMsgToRecipients are executed, your component will look like:
...
// useReducer is better in this case
const [state, setState] = useState({
messages: '',
counter: '',
btnSendMeIsDisabled: false,
messageToSend: [{
from: '',
to: '',
message: ''
}],
callSendMsgAxios: false,
...
});
useEffect(() => {
if(callSendMsgAxios) {
sendMsgAxios();
setState(prevState => ({ ...prevState, callSendMsgAxios: false }) );
}
}, [callSendMsgAxios]);
...
const sendMsgToMe = () => {
const { senderIdString, senderId } = props;
const { messages, counter } = state;
let myNumber;
setState(prevState => ({
...prevState,
btnSendMeIsDisabled: true,
}));
axios
.get(`${appConfig.URL_REST}user`, {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
})
.then((response) => {
myNumber = response.data.phoneNumber;
setState(prevState => (
{
...prevState,
callSendMsgAxios: true,
messageToSend: [
{
from: senderIdString ? senderIdString.number : senderId,
to: myNumber,
message: messages[counter],
},
],
}
));
});
};
...

Answer 2

The code you put in useEffect, is executed, based on the dependencies you send to it.
So first ask yourself,
What should I execute? (Becomes the body of your useEffect)
Does it depend on anything before determining if it should execute or not. (Becomes the dependency)
useEffect(() => {
this.sendMsgAxios(a, b c); // a, b, c could be still thats contained in your state
}, [a, b, c]) // clearly since a, b, c are ones which the effect depends on, you need to pass them in the dependencies array
I'm hoping this will lead to what you want to achieve.