<DrawCurve data={this.state.data}/>
suppose the above draws a curve when state.data is “1”.
Why does a state update,causing a react re-render not overwrite a scene with the new data?
Any example of disposing functional components in react-three-fiber based on state update?
any prop update re-renders the component:
function DrawCurve({ data }) {
// do something with data
return (
<someThreejsThing whatever={data}>
how that data change is reflected in the view (threejs) is up to you. if you dont see a change then you’re handling threejs in a wrong way. for instance, geometry was just removed, everything is now a buffergeometry which is slightly more complex to update. some objects can’t be updated, they must be re-instanciated etc.
if you have a codesandbox i can tell you why you don’t see changes but pls reduce it to its minimum. 
Hey drcmda,
The framework I am using is of the company,which they are very adamant to share.I wanted to make a minimum of the code the time you told me npx codesandbox would be sufficient but the data utilized to create the scene are taken from local modules and api calls(loads of backend work) that would take looong to add in a customized framework.
Can you check out the code below?
The below takes in an array vectors and renders a curve.
[Array(200) ]
function DrawCurve({ draw, color }, props) {
console.log(draw);
if (draw === undefined) {
return null;
} else {
console.log(draw);
let curve = useRef();
curve.current = draw;
// below converts 200 vectors into 600
let kurve = new THREE.CatmullRomCurve3(curve.current, false);
pints = kurve.getPoints(600);
let interpolationPoints = useRef();
interpolationPoints.current = kurve.getPoints(6000);
// console.log(pints);
//add geometry
// below creates the dots you see on the screen
const dotGeometry = useRef();
dotGeometry.current = new THREE.Geometry();
pints.forEach(element => {
dotGeometry.current.vertices.push(element);
});
// console.log(dotGeometry);
const material = useRef();
const mesh = useRef();
const elapsedTime = clock.getElapsedTime() * 1000;
const hundredMinutes = 6000000;
const totalFrames = 6000;
const frameInterval = useRef();
frameInterval.current = hundredMinutes / totalFrames;
const currentFrame = Math.floor(elapsedTime / frameInterval);
let temp = null;
const currentVector = useRef();
useFrame(() => {
currentVector.current =
interpolationPoints.current[
Math.floor(
(clock.getElapsedTime() * 1000) / frameInterval.current
)
];
satLabel.current.position.set(
currentVector.current.x,
currentVector.current.y,
0
);
mesh.current.position.set(
currentVector.current.x,
currentVector.current.y,
0
);
});
return (
<points geometry={dotGeometry.current}>
<mesh
{...props}
ref={mesh}
scale={[1.5, 1.5, 1.5]}
position={curve.current[0]}
>
<boxBufferGeometry args={[2, 2, 2]} />
<meshStandardMaterial color={color} />
</mesh>
<pointsMaterial size={0.5} color={'white'} />
</points>
);
}
}
The above component is called multiple times based on weather the data from componentDidMount() is an array or not.
{this.state.markers[0] !== undefined ? (
this.state.markers.map(element => (
<DrawCurve
draw={element['Vectors']}
color={element['Color']}
date={dAte}
/>
))
) : (
<DrawCurve date={dAte} />
)}
The above loops through state to create multiple instances of the functional component.
Thanks
what i can tell you right off the bat is that this is invalid code. hooks can not be conditional. and you have side effects in the render function, which should be pure, there should be no new FOO.bar() etc.
const [local] = useState(() => new FOO.Bar())
const local = useMemo(() => new FOO.Bar(arg), [arg])
here’s an example how you could deal with updated curves: splines - CodeSandbox