PanelStack2 'Render active panel only' not working

[rygo11]

Environment

• Package version(s): 3.49.0
• Operating System: OSX
• Browser name and version: Brave, Firefox, Safari

Code Sandbox

The issue happens on demo:
https://blueprintjs.com/docs/#core/components/panel-stack2

Steps to reproduce

1. Go to https://blueprintjs.com/docs/#core/components/panel-stack2
2. In demo turn off 'Render active panel only'
3. Set counter to > 0
4. open next panel
5. return to panel 1

Actual behavior

Counter value resets to 0 on return to panel 1

Expected behavior

Counter value should remain unchanged

Note I could be wrong about how this component is supposed to work, but my understanding was that by keeping all panels mounted the state of each panel should be maintained.

Possible solution

[adidahiya]

At the time of writing, the core version in the docs site was 3.49.0 (note this version is important to include in your bug report, instead of simply "whatever is in the online demo", since the latter changes over time).

This seems to be a regression in PanelStack2; the counter state should be retained as you navigate through panels when renderActivePanelOnly={false}.

[adidahiya]

I've traced the problem to this code in PanelView2 which isolates the panel component's lifecycle from that of our PanelStack2 component:

blueprint/packages/core/src/components/panel-stack2/panelView2.tsx

Lines 80 to 88 in beb33c2

	const PanelWrapper: React.FunctionComponent = React.useMemo(
	() => () =>
	props.panel.renderPanel({
	closePanel: handleClose,
	openPanel: props.onOpen,
	...props.panel.props,
	} as PanelProps<T>),
	[props.panel.renderPanel, handleClose, props.onOpen, props.panel.props],
	);

This was added to fix bugs in controlled mode where we violated some React rules around inconsistent number of hooks called within PanelStack2. But now it seems like the memoization isn't working very well and we create a new wrapper component too often, which causes the wrapped panel to unmount and re-mount excessively. I suppose we shouldn't be using React.useMemo as a semantic guarantee anyway, since the React docs suggest that it should only be considered a performance optimization rather than a guarantee. So we'll need to find another way to create a "PanelWrapper" which guarantees that it doesn't get re-created if a panel definition is unchanged.

[rygo11]

Apologies ref the version number, I now understand the importance and have updated the bug report. Thanks for the follow up.