Apparent incompatibility with React v18? Graph is initially blank; graph becomes visible after renaming graphData object, but then disappears again after refreshing

[btslater]

Describe the bug This is a very strange one: Basically, the graph does not initially appear. But, it does appear if you rename the graphData object. But then if you hit refresh, it disappears again!

To Reproduce

1. View my minimal codesandbox example (or build locally with create-react-app and use the default web server).
2. Initially, the screen will be empty, with no visible graph.
3. Rename the graphData variable to graphData2 and hit Command-S to save.
4. After saving, the codesandbox browser should automatically hot-reload, and the graph should now be visible!
5. Hit refresh in the codesandbox browser, and the graph should now be gone!
6. Rename graphData2 back to graphData and save. The graph should now be back, but it will not persist across another refresh!

Expected behavior

1. I expect the initial view to NOT be empty—there should be a graph based on my graphData object!
2. I expect the graph to stay visible even if I hit reload. The graph visibility should not depend on whether I have renamed the graphData object.

Desktop

• OS: macOS 10.14.6
• Browser: Chrome 102.0.5005.61

Additional context One strange thing I noticed is that I get this warning in the console:

WARNING: Multiple instances of Three.js being imported.

However, I'm not sure why this is the case, since I am only importing ForceGraph2D once. I'm not sure if this is relevant.

[btslater]

After some further experimentation, I believe the issue is from some incompatibility with React v18. Here is a codesandbox where the only difference should be the versions of react and react-dom, and this one works as expected!

[ansh]

I have been facing this issue as well.

[jbalpert]

I have also seen this issue occur in my codebase

[ChetanNair]

Same here. Spent quite some time trying to figure it out before finding this open issue.

[ansh]

Downgrading to React v17 fixed it. But, that shouldn't have to be the solution :/

[jbalpert]

Oh thanks man that worked!

[OR13]

I resolved by downgrading react as reported above:

npm i react@17 react-dom@17 --save

[naseemshah]

Hey all,

I have the same issue, but I have some workaround. If you're like me where the project is already in React v18 and can't go back, try this:

// put some dummy data in initial data
const initialData = {
  nodes: [ { id: "id1", name: "Dummy data 1", val: 10, }, { id: "id2", name: "Dummy data 2", val: 9, }, ],
  links: [ { source: "id1", target: "id2"  },],
};

// actual data should be different from initial data
const myData = {
  nodes: [ { id: "id1", name: "Actual Data 1", val: 10, }, { id: "id2", name: "Actual Data 2", val: 9, }, ],
  links: [ { source: "id1", target: "id2"  },],
};

// In your component set the data state as actual data on component load using useEffect
function App() {

  const [data, setData] = useState(initialData);
  useEffect(() => {
    setData(myData);
  }, []);
  
  return (
    <div className="App">
      <ForceGraph2d graphData={data} />
    </div>
  );
}

Here is the CodeSandBox link for the same: https://codesandbox.io/s/react-18-force-graph-workaround-fix-5kp84n

I suspect it's because of component mounting twice initially in React v18. Hope a full fix is on the way :)

Happy Hacking!

[Craksy]

I'm experiencing the same. Oddly enough none of the fixes proposed here work for me.

At least on my phone both of the codesandboxes linked produce the same error. I also tried with some initial dummy data on my own project. I guess I'll try downgrading React later.

Seems like a pretty severe bug though. Has any progress been made on a solution?

[ansh]

Downgrading React is the only solution that works @Craksy

On Sun, Oct 30, 2022 at 8:09 AM, Craksy < @.*** > wrote:

I'm experiencing the same. Oddly enough none of the fixes proposed here work for me.

At least on my phone both of the codesandboxes linked produce the same error. I also tried with some initial dummy data on my own project. I guess I'll try downgrading React later.

Seems like a pretty severe bug though. Has any progress been made on a solution?

— Reply to this email directly, view it on GitHub ( https://github.com/vasturiano/react-force-graph/issues/379#issuecomment-1296281378 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AB6T25I7GY5RQ2VK3FPK463WFZ6SHANCNFSM5YHZSYMA ). You are receiving this because you commented. Message ID: <vasturiano/react-force-graph/issues/379/1296281378 @ github. com>

[vasturiano]

This is indeed related to React 18, and the behaviour of double-mounting when running in strict mode. It only occurs in dev mode. In any case, the issue has now been fixed, in the react-kapsule module. Make sure to upgrade your inner version of this module to at least 2.2.6 in order to be fully compatible with React 18.