-
Notifications
You must be signed in to change notification settings - Fork 275
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Apparent incompatibility with React v18? Graph is initially blank; graph becomes visible after renaming graphData object, but then disappears again after refreshing #379
Comments
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 |
I have been facing this issue as well. |
I have also seen this issue occur in my codebase |
Same here. Spent quite some time trying to figure it out before finding this open issue. |
Downgrading to React v17 fixed it. But, that shouldn't have to be the solution :/ |
Oh thanks man that worked! |
I resolved by downgrading react as reported above:
|
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: I suspect it's because of component mounting twice initially in React v18. Hope a full fix is on the way :) Happy Hacking! |
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? |
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 (
#379 (comment)
) , 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>
|
This is indeed related to React 18, and the behaviour of double-mounting when running in strict mode. It only occurs in dev mode. |
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
create-react-app
and use the default web server).graphData
variable tographData2
and hit Command-S to save.graphData2
back tographData
and save. The graph should now be back, but it will not persist across another refresh!Expected behavior
graphData
object!graphData
object.Desktop
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.
The text was updated successfully, but these errors were encountered: