Query on useEffect - React Hooks

Question

I am developing an application where I need to make multiple API calls on page load and I need to alter the single state of the component upon each API call. The architecture looks like below.

const [stateForm, setStateForm] = useState(.....)

useEffect(()=>{
//FIRST API CALL
setStateForm({....})
},[])

useEffect(()=>{
//SECOND API CALL
setStateForm({....})
},[])

useEffect(()=>{
//THIRD API CALL
setStateForm({....})
},[])

//SO ON.....

My question is : Is it a okay to cause side effects in this way? Will altering state in each useEffect hook cause mutiple re-renders?

You can also use promises for your calles. fetch().then(() => fetch()...) — Gugu
– Gugu, Commented Sep 24, 2019 at 10:53
each setStateForm cause multiply rerender. Look at answer: stackoverflow.com/questions/55521912/… — Oleg Levin
– Oleg Levin, Commented Sep 24, 2019 at 10:54
"Will altering state in each useEffect hook cause mutiple re-renders?" - almost certainly yes, unless the come simultaneously. — Yury Tarabanko
– Yury Tarabanko, Commented Sep 24, 2019 at 10:55
Also setStateForm does not merge state object as setState method on Component did. So each call will override entire stateForm. If you need to merge state use callback setStateForm(prevState => ({/* merge here */})) — Yury Tarabanko
– Yury Tarabanko, Commented Sep 24, 2019 at 10:56
Multiple useEffect only make sense if their dependencies are different - in your case it doesn't really make sense. — zhuber
– zhuber, Commented Sep 24, 2019 at 10:58

winwiz1 · Accepted Answer · 2019-09-24 12:10:53Z

1

Is it a okay to cause side effects in this way?

There is nothing wrong so it's generally ok. But it's hard to say anything more definite beyond that - there is not much information to judge about this pattern of keeping overwriting the same state using outcome of a series of APIs which are generally async with unclear time to complete or fail.

Will altering state in each useEffect hook cause mutiple re-renders?

React can batch the series of re-renders triggered by setStateForm so there will be only one re-render. If setStateForm has to deal with Promises then React will not use batching, otherwise it may or may not.

edited Sep 24, 2019 at 12:10

answered Sep 24, 2019 at 11:27

winwiz1

3,18214 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Query on useEffect - React Hooks

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related