[Line] Order of points incorrect with React 17 + `StrictMode`

[joealden]

Describe/explain the bug

On the latest version at the time of writing (@nivo/[email protected]), the order of points on a graph seems to be inverted when running on React 17 with StrictMode enabled (so this bug only shows in development, not production).

By "order", I mean their "visual z-index". From looking at the DOM, is looks like this is happening because the SVG elements that make the points are rendered in the opposite order from what happens without StrictMode enabled (and DOM order matters when no explicit z-index is provided). This becomes a problem when points overlap with each other (for example, when multiple lines follow the same path).

Although this doesn't happen in production builds (where StrictMode doesn't have any effect), it would be nice for this to be consistent across development and production, and by this being a problem, it may indicate that this will become a problem in production builds in a future React version.

It's also worth reiterating that this only happens with React v17, you can test this by changing the react deps in the code sandbox to the last v16 release. It's also worth noting that I've tested this in both Firefox and Chrome, so it doesn't look to be browser specific.

To Reproduce

See https://codesandbox.io/s/nivo-line-react-17-strict-mode-bug-l09zg

Steps to reproduce the behavior:

1. Visit the code sandbox linked above.
2. See that the point color shown is wrong (the points are of the color of the "last" line instead of the "first").

Expected behavior

This should behave like it does when StrictMode isn't enabled/doesn't take effect (in production builds).

Screenshots

Just in case anyone can't reproduce this on their machine, here is what I see in the code sandbox linked above:

Desktop:

• OS: Linux (Solus)
• Browser: Firefox 96/Chrome 97
• Version: 0.79.1

[plouc]

This should be fixed in 0.80.0 (could confirm by upgrading the version in the codesandbox).