Loop requests in react with axios

Question

I have a socket defined in the backend that accepts continuous requests for the server. Now, I want to send requests continuously to the backend API, until a stop button is pressed. So, I can use a loop (BAD PRACTICE). The problem is that it never checks the updated state. So, How can I implement this with the best possible coding practice?

I'm using two different pages in Next.JS for client and server. The server has a simple button to start and stop the server, and when the button is set to start, it should continuously accept requests and update the response state, and when the button is set to stop, it should stop requesting any more.

const [close, closeButton] = useBoolean() // State for close button
let req;
proto ? req = 'UDP' : req = 'TCP' // There is a checkbox to select the connection mode. proto is a state.
console.log(`Close button: ${close}`) // This state updates correctly. 

const onSubmit = async () => {
   while(!close)
        console.log(`Close button: ${close}`) // This state does not update while staying in the loop.
        const res = await serverRequest(req) 
        console.log(res.messageFromClient)
    }
}

So, how should I get this to run indefinitely until the close button is pressed. Should I use redux for the global state or is there a better way other than the while loop?

Client code for reference:

 const onSubmit = async values => {
        const clientData = await clientRequest({proto, JSON.stringify(values.message)})
        console.log(clientData)
        console.log(values.message)
    }

This code sends client data every time the message is sent from the client. So, in order to run the client, the server should continuously listen to requests. Whenever the client sends a request, the server should get a response and start the server once again, until the mode of connections is changed or the close button is pressed in the server-side code.

Ouch, my guess instead of setting up this dodgy infinite HTTP calls loop would be to use websockets (socket.io etc)... because that's exactly what websockets are for, continuous bidirectional communication between server and client — Jeremy Thille
– Jeremy Thille, Commented Aug 20, 2021 at 6:42
@JeremyThille Yes, WebSockets are a better choice, and I use that itself in these situations, but this particular project needs custom sockets and that is defined in the backend. I just had to find a way to send continuous requests. Thanks for your reply though. — Aman Kumar
– Aman Kumar, Commented Aug 20, 2021 at 7:03

Drew Reese · Accepted Answer · 2021-08-20 06:47:41Z

1

If you absolutely must use this code, and want it to access updated state then you could cache a copy of state in a React ref and refer to that instead.

const [close, closeButton] = useBoolean() // State for close button
const closeRef = React.useRef();

React.useEffect(() => {
  closeRef.current = close; // <-- cache close value when it updates
}, [close]);

const onSubmit = async () => {
  while(!closeRef.current) // <-- cached close state value
    console.log(`Close button: ${closeRef.current}`)
    const res = await serverRequest(req) 
    console.log(res.messageFromClient)
  }
}

answered Aug 20, 2021 at 6:47

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loop requests in react with axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related