Update Events in React : order?

Question

Suppose I have something like this where both components A and D listen to changes in a global store :

import React from 'react'
import useStore from 'whatever-global-store-manager'

function A() {
  const [store] = useStore()
  if(!store.currentUser)
    return <h1>You must log in</h1>
  else return <B/>
}

function B() {
  return <C/>
}

function C() {
  return <D/>
}

function D() {
  const [store] = useStore()
  console.log(store.currentUser) // Can it be falsey ?
  return <h1>{store.currentUser.name}</h1>
}

In A, when currentUser is falsey, B is not rendered, thus D is not rendered. But suppose this scenario :

• At first, currentUser is defined as an object with a name property, so D renders, listens to changes in the store and renders the name.
• Then, somewhere else in the app, currentUser is set to null.

In which order are the "listeners" processed ? Is there any chance that function D is executed with currentUser to null even when begin ultimately removed from the component tree ?

Another way to formulate the question : Should I check against currentUser in component D before accessing its name property ?

I was looking in the doc for a rule like "When two components listen to the same event, the one higher in the hierarchy is rendered first, and if it turns out the second one should be unmounted according the first's output, then the second one is never even called", but couldn't find anything. In practice, I know it works, but I would like to be sure that it's not just luck.

Answer 1

I believe this largely depends on the store observer mechanism, so it's hard to give a conclusive answer without knowing which store you're using. If observers are registered in order, that might affect how you need to deal with it.

If you wanna find out for sure, you could console.log your render methods, or use debugger while changing the value of currentUser.

Analysis of a hypotetical implementation: let's say an observer is registered when the component mounts, and unregistered when it unmounts. In this situation, the component A would trigger first (since it was registered first), and cause D to unmount, unregistering his trigger. In this hypothetical scenario, D wouldn't need to check for null.

Unrequested advice: a good thing for you might be centralizing the "data collection" in one parent component, while the children just receive that as props and render (without observing the store). I've found (both from lore and personal experience) that it simplifies a lot the development process.

Answer 2

Another way to formulate the question :
Should I check against currentUser in component D before accessing its name property ?

• Yes, it is definitely a good decision: it is preferable that there is one redundant code line, instead of obtaining an error.

I was looking in the doc for a rule like
"When two components listen to the same event,
the one higher in the hierarchy is rendered first...

• I think the opposite. Although I neither could find the specific documentation to explaine it, I remember that Components do not update like a cascade. That is the idea of the component oriented programming: each one is an independent entity.

• Note: if I understand your example well, you could test this example by adding a setTimeout that wraps the return of function A, right? So this way you can then set currentUser as null and D wil be still rendered and you can see what happens.