Multiple React components relying on the same UseEffect() condition

Question

Let's say I have two React components, A and B. Both components have a useEffect that 'listens' to the same condition (condition1, which could be a global variable, as in some React Context). When the context variable changes, which component's useEffect() is executed first?

Component A { React.useEffect(() => { do something }, [condition1]); }

Component B { React.useEffect(() => { do something else }, [condition1]); }

It would depend on the hierarchy of said components. Are they siblings or parent/child? — Chris
– Chris, Commented Jan 5, 2020 at 0:58
Hi, that makes sense. The components are siblings, but Component A is rendered before Component B, and I notice that Component A's useEffect is triggered first. Pseudo code: return ( <div> <ComponentA> <ComponentB> </div> ) — Jorge
– Jorge, Commented Jan 5, 2020 at 18:23

Jorge · Accepted Answer · 2020-01-05 18:34:33Z

1

Thank you, Chris. You've answered this question. When multiple components reference the same condition in a conditional useEffect(), whichever component is higher-up in the hierarchy will have its useEffect executed first.

answered Jan 5, 2020 at 18:34

Jorge

212 bronze badges

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

Collectives™ on Stack Overflow

Multiple React components relying on the same UseEffect() condition

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