DEV Community

Discussion on: Integrating P5.js with React

Collapse
 
dcsan profile image
dc

Unfortunately this approach just keeps creating new instances of a p5 component on each "hot update" when using create-react-app or similar.

Collapse
 
nardove profile image
Ricardo Sanchez • Edited

A solution can be found here lloydatkinson.net/posts/2022/how-t...

Basically, if you follow the example in the comments above all you need to do is:

useEffect(() => {
  const myP5 = new p5(Sketch, myRef.current);
  return myP5.remove;
},[])
Enter fullscreen mode Exit fullscreen mode

This will remove the current p5 instance and creates a new one on the next render

Collapse
 
goksuokar profile image
Goksu

yess.. did you find a solution for this? I'm trying to create a sorting visualizer using react and p5 and it's just not working..