It looks like the useEffectOnce doesn’t have the behavior I’m expecting. Either I misunderstood it o...

# react

[GUIGAL Allan]

It looks like the useEffectOnce doesn’t have the behavior I’m expecting. Either I misunderstood it or it’s not working properly :
Whenever I update a component above the one using this useEffectOnce component AND there is a dom update to be made => Then the useEffectOnce is triggered again.
Is it the expected behavior ? I’ve instead implemented my own hook for such a purpose with useRef, any opinion ?

Example in the answers :

[GUIGAL Allan]

Output after spamming the button (trigger state change) in the parent of the component using the hook

[turansky]

Looks like you need key for child 🙂

[turansky]

onceEffectComponent {
    key = "unique-key"
}

child isn’t required

[turansky]

cc @Sergei Grishchenko

[GUIGAL Allan]

Wow thanks! 🙂 It did work for my example. Now I’m trying to put it a bit deeper inside other components and the same happens ? 🤔 Btw the same happens for my useRef it gets reseted (the identity doesn’t seem to work in nested components somehow?)

[GUIGAL Allan]

Calls for this “onceComponent” at level 1 and level 2

[GUIGAL Allan]

The components simple code :

[turansky]

key for parent?

[Sergei Grishchenko]

I think it is expected behavior because every time you click button you mount/unmount component, so it's life-cycle starts from the beginning, that is why effect hooks behave like that. Once here means once per mount/unmount life-cycle. Hack with key looks strange for me, I will check how does it works with original JS React

[Sergei Grishchenko]

Here example with key and it behaves like your first example if I am not mistaken
https://codesandbox.io/s/cranky-shannon-tk23j?file=/src/App.tsx

[Paul SOUTEYRAT]

@Sergei Grishchenko I think your example is not quite exactly the same as the one provided by @GUIGAL Allan in kotlin. To me, it looks like it should be this: https://codesandbox.io/s/kind-sea-45wqs?file=/src/App.tsx.
NB: It works like the second example (i.e. with key in kotlin) with or without key which seems to me like the correct behavior.

[Sergei Grishchenko]

oh, thank you, now I've got it

[GUIGAL Allan]

I can confirm the second example from Paul, we don’t observe the same behavior with our project and debugging in Kotlin JS. Thankfully the key hack gives us a solution for now.

[GUIGAL Allan]

Do you have any idea where it could be coming from ? Should I open an issue on GitHub ?

[turansky]

Do you mean kotlin-wrappers issue?

[GUIGAL Allan]

I think so ?

[turansky]

Yes, looks like issue for kotlin-wrappers

[turansky]

https://github.com/JetBrains/kotlin-wrappers/issues

[turansky]

With thread link in description