react-plotly.js icon indicating copy to clipboard operation
react-plotly.js copied to clipboard

Chart type scatter3d make onClick loop when calling history.push inside it

Open l11111111111111 opened this issue 4 years ago • 5 comments

Using Plot inside a Router with type "scatter3d" and trying to use history inside onClick (only if it doesn't unmount the Plot Component) make onClick loop after a first click.

Minimal example:

import Plot from "react-plotly.js";
import { BrowserRouter, Route, useHistory } from "react-router-dom";

function Chart3D() {
    const history = useHistory();

    return (
        <Plot
            onClick={() => {
                console.log("This will be printed a lot");
                history.push("/");
            }}
            data={[
                {
                    x: [1],
                    y: [1],
                    z: [1],
                    type: "scatter3d",
                },
            ]}
        />
    );
}

export default function App() {
    return (
        <BrowserRouter>
            <Route path="/" component={Chart3D} />
        </BrowserRouter>
    );
}

l11111111111111 avatar Feb 23 '21 12:02 l11111111111111

It also happens with setState() https://stackoverflow.com/questions/65957122/plotly-onclick-event-cause-infinite-rendering-loop-in-react#new-answer Also for 3d lineplot

Eyon42 avatar Sep 06 '21 04:09 Eyon42

any solution to this?

adeelibr avatar Jun 02 '22 22:06 adeelibr

any solution to this?

Probably not ? I stopped working on the project where I was needing to do this just a few days after submitting this issue so I don't have any workaround and didn't investigate further. But since this issue is still open 15 months after being submitted and the only commit made since is just changing a link in the README, I don't think this package is actively maintained and it would probably be safer to use something else.

l11111111111111 avatar Jun 05 '22 12:06 l11111111111111

Extra note. I think I discovered this after I commented on the issue. This problem is not of react-plotly.js but rather of the plotly.js library. After finding this problem I tried ditching this library and using plotly.js directly and the same problem presented itself.

Eyon42 avatar Jun 06 '22 18:06 Eyon42

Which is why this repo is so quiet - it's a thin wrapper around plotly.js so most issues that pop up are actually issues in plotly.js itself. @Eyon42 if you'd be able to reproduce the problem as a codepen or such using plotly.js directly and post it at https://github.com/plotly/plotly.js/issues, that would help us a lot to find a solution.

alexcjohnson avatar Jun 08 '22 13:06 alexcjohnson