Flash of 1px wide canvas on initial render

[Mesoptier]

Initial render: the <svg> is rendered with width={1}, causing it to appear very stretched for a single frame.

On the next frame: the useResizeObserver hook returns an actual value for the width and the canvas renders correctly.

See https://react-mnnsnw.stackblitz.io. In this example I render a whole bunch of points to slow the rendering down and emulate a heavy visualization, such that the issue is more easily visible.

Besides looking a little bit janky, this can also cause significant performance issues for page loads, since the <Coordinates.Cartesian> component might render tens of thousands of lines and labels. This performance issue is the actual problem I'm facing in my project.

---

Potential solutions

• I think the simplest solution is to just not render the <svg> on the first frame, before the resize observer is ready. This way the first actual render will have the correct dimensions.

• If the user passes both width and height, it should be possible to omit the resize observer altogether and just use the provided dimensions. This is the approach used by other libraries (e.g. react-window) and also better matches the API of the <canvas> and <svg> elements.

  If you're interested in this solution, you might point users to the AutoSizer component from react-virtualized (also published as a standalone package: https://github.com/bvaughn/react-virtualized-auto-sizer). Their description makes it sounds like what you're looking for here:

  Many react-virtualized components require explicit dimensions but sometimes you just want a component to just grow to fill all of the available space. The AutoSizer component can be useful in this case.

[stevenpetryk]

Huh yeah, I suppose this is kind of a janky solution. I'll explore the things you shared! I think both bullet points make total sense and sound easy to implement.

I'll have to take a look at AutoSizer :)

[Mesoptier]

Looking at it again, I don't think I would actually recommend AutoSizer anymore. It hasn't been really maintained in a few years now and doesn't even use resize observers under the hood.