Check for equivalence with previous render's value doesn't respect optional-chaining / null coalescing of uncompiled code

[dfoley112]

An expression such as:

const allRiskCategories =
    policy?.PolicyRiskCategory.map((prc) => prc.RiskCategory).length ?? 0;

is compiled to:

let t9;
if ($[12] !== policy.PolicyRiskCategory) {
    t9 = policy?.PolicyRiskCategory.map(_temp3).length ?? 0;
    $[12] = policy.PolicyRiskCategory;
    $[13] = t9;
}
else {
    t9 = $[13];
}
const allRiskCategories = t9;

Note the initial check for equivalence is not optionally chained like the uncompiled code. This causes a null reference exception whereas the original (uncompiled) code does not. Should the compiler be making meaningful changes to the uncompiled code like this - i.e. making assumptions which the uncompiled code did not?

For reference, re-expressing the original statement as this works:

const allRiskCategories = policy
  ? policy.PolicyRiskCategory.map((prc) => prc.RiskCategory).length
  : 0;

[poteto]

@dfoley112 a couple of things:

• bug reports should be reported in https://github.com/facebook/react/issues
• what version of the compiler are you on?
• could you share where policy comes from? or construct a repro in our playground

[dfoley112]

version: "19.1.0-rc.2"

policy is requested asynchronously from a db and therefore is undefined on initial render

[poteto]

Please make a repro in our playground so we can help debug this! I am going to close this discussion for now, please create an issue in the facebook/react repo once you have a repro, thanks!