Using Controlled zoom & ZoomContent at the same time breaks

[tarngerine]

Issue Type

• Bug report
• Feature request
• Question / support request
• Other

Description

See repro in Codesandbox link: https://codesandbox.io/s/snowy-hill-ltjwwc?file=/src/App.tsx

Using Controlled with ZoomContent prop breaks the webpage that it's used in. Using them separately works fine.

After the first zoom-in, the first zoom-out breaks (no animation), and every interaction on the website thereafter is locked.

[rpearce]

That sounds rough. Thanks for the report! I'll see what I can do.

[rpearce]

This is the next issue I'm doing! Time-expectation-wise, I'll be able to look at it within the next week.

Thank you for your patience.

[rpearce]

Okay... initial finding:

Converting this

ZoomContent={(props) => <CustomZoomContent {...props} />}

to this

ZoomContent={CustomZoomContent}

works with the Controlled zoom.

However, the Uncontrolled component doesn't have this limitation. Let's see...

[rpearce]

I also was able to get it working using React.useCallback:

  const Zoom2Content = useCallback(
    (props: ControlledProps) => <CustomZoomContent {...props} />,
    []
  );

You can see that working on this CodeSandbox

[rpearce]

I think that the issue is that ={() => <Something />} creates a new instance of that component on every render, but this might not work for a reason I haven't figured out yet.

When we use Uncontrolled (the default component), it works, for (props) => <CustomZoomContent {...props} /> has only been called once, and Uncontrolled manages its own zoomed/unzoomed state.

However, with the Controlled example, if we update the parent component state, then a new instance of () => <Something /> is created and passed on every render, and the ZoomContent property seems like it can't handle that. Maybe it should?

There are some workarounds I've listed above, and this seems like a bit of a deep dive to figure out any further that I don't have time for tonight, unfortunately. G'night!