Group handles newly registered Panels + Separators during mount

[bvaughn]

Previously the Group ref object did not work properly in this scenario:

function Repro() {
  const groupRef = useGroupRef();

  useEffect(() => {
    const group = groupRef.current;
    if (group) {
      group.setLayout({ left: 50, right: 50 });
    }
  }, []);

  return (
    <Group groupRef={groupRef}>
      <Panel id="left">Left</Panel>
      <Panel id="right">Right</Panel>
    </Group>
  );
}

The reason being that Group's internal initialization was like so:

1. Panels register themselves with their parent group on mount (in an effect)
2. Group adds pending panels into (React) state which schedules a re-render once all panels have finished registering
   • External effects run now, meaning they can't safely read/write layout
3. After the re-render, Group processes the newly registered panels in an effect

After this commit, the internal timing of when a Group initialized itself is like so:

1. Panels register themselves with their parent group on mount (in an effect)
2. Group processes pending Panels (and Separators) in the next effect
3. External code can safely read/write layout during the next effect as well

---

Resolves #576

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
react-resizable-panels	Ready	Preview	Jan 4, 2026 3:14pm