react-ab | Simple declarative and universal A/B testing component | Testing library

I think you misunderstood what you want to be in dependencies array is [data, setStateOfValue] not [data, stateOfValue]. because you use setStateOfValue not stateOfValue inside useEffect The proper one is:

change your addPlayer(player) function to check if the player is winner as below:

I like your example, nice work.

It was a big revelation when I understand how key works in React. Let me explain you what happens here.

Key tells react if a component representation in the dom is reused or not. If key remain the same it will be reused. If it changes it will be destroyed and remounted.

So when you use rowIndex as key. It remains the same and the animation works. But somehow the Midi is not refreshed. Midi has some issues, I do not know what.

When the key changes CardRow is remounted and it destrows the animation. Midi is also remounted and it works.

My solution is that I use rowIndex as key. And I added RowNotation as key to the Midi. Only Midi will be remounted. And both animation and midi works.