In react project development, how to optimize multiple interfaces on a page?

in the development of a react project, how to optimize multiple interfaces on a page?

react project development, multiple APIs are called on a page.
for example, page calls API A-> B-> C to initialize the page, and the A, B, C API is used not only in page initialization but also in
interactive operations. At present, I deal with it in this way

init----> dispatch(A),dispatch(B),dispatch(C)
 dispatch(A)->dispatch(B),dispatch(C)

I don"t know if there will be performance problems in this way, how to optimize it?

React-router-redux javascript redux react.js

Aug.04,2021

The

interface is left to redux to handle. The page just takes the data from redux.

consider Promise

I'm just writing a solution. I assume here that your A, B, C all return a promise, to do it using Promise.all, and the A, B, C you said is also used in interoperability, so what to do when interacting. Does not affect the initialization page.

componentDidMount() {
      const actionsCreators= [A,B,C]
      const promiseArr = []
      for (const v of actionsCreators) {
        promiseArr.push(dispatch(v))
      }
      Promise.all(promiseArr).then(() => {
          // 
      })
}

Previous: What are the host and native objects of JS?

Next: [git] [how can members only look at their own branches? ]