My code broke when I started using useRef in the ForceGraph component in Next.js 15

[cruzmedien]

Hello, I’m using the ForceGraph in a Next.js 15 project, but when I use a ref in the ForceGraph, I receive the error below. It seems like it’s re-rendering the reference infinitely or something similar. All my functionalities work, even the camera, but I get this infinite re-rendering in the console.

Here is my Code:

I would appreciate the help.

Originally posted by @cruzmedien in https://github.com/vasturiano/react-force-graph/issues/324#issuecomment-2462188659

[vasturiano]

@cruzmedien this is likely related to this from a different library: https://github.com/vasturiano/react-kapsule/issues/14

However, if this is next.js specific, it's not clear what changed in next.js 15 that makes the behavior of useState differ from previous versions. Perhaps someone with more insight can comment on this so we can apply the correct fix.

[cruzmedien]

I had to downgrade to Next.js version 14.2.17. With this version, everything works. It would be helpful to identify the issue with version 15.

[vasturiano]

@cruzmedien are you able to do a simple reproducing example on codesandbox so we use it as a base to debug this further? That platform allows you to setup an app with next.js 15, so it should be reproducible.

[cruzmedien]

@vasturiano Hello, I created a small example here: codesandbox You can see the error in the console. I hope this helps in finding a solution.

[vasturiano]

@cruzmedien thanks for making that example.

I've applied a fix for this. If you upgrade to the latest version of the module (react-force-graph-3d: 1.24.6) you shouldn't experience the issue any more.

[cruzmedien]

Thank you very much. Now it works perfectly. I really appreciate the great support.