I have couple of states where I change on different parts of the project:
which are:
const [sketchDimensions, setSketchDimensions] = useState(SHOE_DIMENSIONS);
const [selectedSegment, setSelectedSegment] = useState(null);
const [activeSidebar, setActiveSidebar] = useState(1);
// and so on
and I’m using @P5-wrapper/react as a p5
wrapper.
I have a canvas component:
const Canvas = memo(({ sketchDimensions, setSketchDimensions, selectedSegment, setSelectedSegment, activeSidebar, selectedView, currentView }) => {
if (sketchDimensions.length > 0) {
console.log('initialized canvas');
return (
<ReactP5Wrapper
sketch={shoeSketch}
sketchDimensions={sketchDimensions}
setSketchDimensions={setSketchDimensions}
selectedSegment={selectedSegment}
setSelectedSegment={setSelectedSegment}
// and others
/>
);
}
});
and problem appears when the state changes and it creates new canvas elements and GPU increases around 0.8-0.9GB every time one of the states change.
is it possible not to re-render the canvas every time state changes?