You should be able to use uirevision to avoid most such problems: https://plot.ly/javascript/uirevision/

It does not seem to work for selection state.

In your codepen, what does the problem look like? Can you post a gif? I can't replicate any issues on this end...

Posted a couple gifs in the description.

Oh I see, the selection box disappears. Yes, this is not something which is persistent in plotly.js at the moment (it's not part of the figure spec at all actually) ... issue: plotly/plotly.js#1851

Cool. Ideally to fit React's model selection could even be a controlled prop.

Yes, this would be ideal but the underlying Plotly.js library doesn't really work in such a way as to be compatible with this. The idea behind uirevision is for it to be more controllably uncontrolled :)

@DylanVann you can control the constraint-range + range + selectedpoints property of traces to maintain the select state yourself, but it takes a lot of time. The api is not programmer-friendly

Just ran into this issue myself.
When I drag to select a region on the scatter plot, I want to show the selected items so I'm using onSelected to update the selected IDs in a parent Component. But unfortunately this state change is causing the <Plot/> inside the <PlotContainer /> to re-render and so I don't see the selection change in the Plot:

Component = () => {
    const [selectedIds, setSelectdIds] = React.useState([]);

    return (
        <div>
            <PlotContainer setSelectdIds={setSelectdIds} />
            <ShowSelected selectedIds={selectedIds} />
        </div>
    )

Any pointers or workarounds would be much appreciated? Thanks.

Actually, I re-read the issue above and realise that was really concerned about the selection box but I'm not too bothered about the box. For me, I lose the selection itself. Is there a way to preserve the selected points? I've used all the state management described at https://github.com/plotly/react-plotly.js#state-management to preserve the axis ranges etc but I don't see selected objects in any of that state?

It would be good to get the selection as an input props. I was hoping to use react-plotly. I'm implementing something like crossfilter where the plot selections/brushes are a key part of the interface.

However it sounds like the underlying plotly library doesn't have robust selection support. Is there some workaround, so I can use react-plotly instead of d3? — maybe overlaying my own selection box outside of plotly, but then it would have to synchronize with the margins and scales.

I'm using Plotly with crossfilter, and it seems that sometimes I am losing the current selection because of a re-render and sometimes not. Haven't got to the bottom of it yet....
https://github.com/will-moore/parade-crossfilter/blob/master/src/plots/Plot.js is my wrapper to maintain axis ranges on re-render. The parent https://github.com/will-moore/parade-crossfilter/blob/master/src/plots/ScatterPlot.js listens for when the crossfilter filter changes to update the plot. Based on React-crossfilter example at https://www.lighttag.io/blog/react-dc-js/.