Document about potential issues with remounting

[yangshun]

Background

Hi Brian 👋🏻 , thanks for this awesome library! I'm building a window tiling manager (similar to VS Code) on top of this library and it renders a dynamic grid of panels which can be nested indefinitely. Here's the demo if you're interested (there are still some bugs but the general idea is there).

Issue

I ran into some issue regarding <Panel>s not showing the correct width after remounting. Here's a simplified repro of the issue: https://stackblitz.com/edit/stackblitz-starters-eac7cb?file=src%2FApp.tsx:

1. Click on the "Remount" button and you can see the the right panel is reduced to a width of 0.
2. Click on the red divider and the panels appear correctly.

After some digging, I think the problem is with the right panel remounting and having a new internal ID, hence there's no existing size available in the PanelGroupContext and it renders with 0 width. I kinda solved the issue by passing the right <Panel> a stable id. Please lemme know if there's a better way.

Suggestion

I'm not sure if this is considered a bug, but I think it'd be useful to document somewhere that when doing dynamic/conditional rendering of <Panel>s, there's a potential issue with remounting and that stable ids can be passed in to prevent the issue.

[albertodeago]

@yangshun I'm running into the same problem, I tried to set the id on all the panels (also on the panelgroup) but it's not working, how did you manage to solving it?

[yangshun]

Nothing special, I just added id fields to all the Panel components. If you provide a repro I can help to take a look.

[albertodeago]

I had the issue also specifying the ids. I actually solved using the API on the single Panel components

[bvaughn]

Suggestion

I'm not sure if this is considered a bug, but I think it'd be useful to document somewhere that when doing dynamic/conditional rendering of <Panel>s, there's a potential issue with remounting and that stable ids can be passed in to prevent the issue.

This seems like a good suggestion. In general, I don't want to make id required because there are simple use cases where it's really not needed, but any time you have dynamic content going on, id and order are good props to have.

I'll add a note to the #FAQ section.

May also be nice to add a DEV-only warning if we detect the following scenario:

• PanelGroup mounts with one set of Panels and later changes AND
• Any Panel in the new set doesn't have an id prop

[bvaughn]

FAQ updated in ddf346e. I'm going to give the DEV warning a bit more thought, but hopefully this at least helps others.

[bvaughn]

Dev warning added in #174 and published in 0.0.54

---

❤️ → ☕ givebrian.coffee

[yangshun]

Thank you for this library! P.S. bought you some coffees ☕

[bvaughn]

That was very kind of you! ❤️