useEffectOnce / useLayoutEffectOnce / useRef broken when re-rendering at an above component

[Lezzio]

Hi,

When using these hooks in a component, whenever we trigger a re-render from the above components it doesn't remember it has been fired once already and loses its "memory". Note that the re-render needs to induce DOM modifications (node add/delete as far as I know) for the bug to happen.

The expected behavior is the following on React JS : https://codesandbox.io/s/kind-sea-45wqs?file=/src/App.tsx But it instead acts just like this : https://codesandbox.io/s/kind-sea-45wqs?file=/src/App.tsx

It's what we've at least observed in our project and we reproduced the bug this way :

Main component with the state update and children:

OnceComponent :

ParentComponent :

Console output after pressing the button multiple times :

The minimal way to work around this issue is by using a unique key on the uppermost components next to the state being updated (direct children) :

Works

Works

NB : Slack thread on the issue https://kotlinlang.slack.com/archives/C5ZTZ6ER0/p1628553043020800

[turansky]

@Lezzio @PeredurOmega Do you use function components?

[PeredurOmega]

Almost exclusively

[sgrishchenko]

This issue is reopened because we still have problems with keys in wrappers and we have plans to introduce some solution.

[turansky]

Workarounds unlocked by #1264

[turansky]

Next step - compiler plugin! :)

[turansky]

Compiler plugin with conditional rendering support is ready!