blog/en/react_compiler_2/

[giscus[bot]]

blog/en/react_compiler_2/

Let's take a deep dive into useMemoCache, one of the key components of React Compiler. We'll explore the operating principles of useMemoCache, examine its implementation, and learn about the experimental feature enableNoCloningMemoCache.

https://yongseok.me/blog/en/react_compiler_2/

[Hardik500]

But if activated, it ends with 1 calculation. That’s quite a big difference.

I believe it would be two calculations right, 1 for A1 and 2 for A2, instead of it just being 1, I may be wrong though, so feel free to correct me.

[Hardik500]

My bad I believe the flow is happening like this,

Flag is set to true:

1. Initial Render: A2 calculation (Count 1)
2. Suspense encounters, since B2 not ready (Count 1)
3. Other updates in UI (input getting updated) (Count 1)
4. Rendering is resumed, A2 and B2 rendering reattempt (Count 1)
5. B2 is ready, render success (Count 1)

Flag is set to false:

1. Initial Render: A2 calculation (Count 1)
2. Suspense encounters, since B2 not ready (Count 1)
3. Other updates in UI (input getting updated) (Count 1)
4. Rendering is resumed, A2 recalculate and B2 rendering reattempt (Count 2)
5. B2 is ready, A2 (recalculate) render success (Count 3)

I believe this is the flow which is happening.