Questions regarding sidebar behaviour and closing animation

[manuelpoelzl]

Hi,

I currently use a sidebar inside my react app which has some states and I'd like to reset them whenever the sidebar closes.
Since there are some states, I don't want to make a function that resets all states.

Coming from fluent UI Lib i see that there the initial useEffect call is only triggered, if the panel is actually shown, here in Prime, the hook is triggered, even if it is not actively rendered. Also on Fluent when I close the panel, the underlying component is getting reset to its default values, here it is persistent. I tried specifying the key prop on the sidebar, which works but then the closing animation of the panel is gone and it just disappears.

I've provided a sample here: Panel test

To replicate:

1. Open the sample and you will see the text "Not visible but rendered" - this text is set inside the sidebar, even it is not opened or visibly rendered at the moment
2. The sidebar has a key prop set, when you click the toggle button and you close the sidebar you will see that no animation is played and the sidebar immediately closes.

So basically my two questions are:

1. Why is the initial useEffect called if nothing is rendered visibly (It is fine tho, could just add the isVisible prop as dependency)
2. Is there some way to get the closing animation working again when I specify the key attribute?

Thanks!