Handling updating component styles outside of react state

Question

This is a question about react. d3.js could be exchanged with any other library that generates data used as style properties of react components.

I am generating large amounts of positional data as a side-effect in the useEffect hook, which I then use to position react components.

Rendering this dynamic data (px coordinates of a moving force distance graph), therefore, would trigger hundreds of re-renders to the components, until the graph "cools down".

const Container = () => {
  const [state, setState] = useState([]);

  useEffect(() => {
    // d3 data manipulation ...
    const simulation = forceSimulation()
      .nodes(data.dataset)
      .force('charge', d3.forceManyBody().strength(-50));
  
    // storing the dynamic data in react state
    setState(simulation);

    // cleanup
    return () => simulation.stop();
  }, [state])

  return (
    <>
      {state.map({ x, y }, index) => (
        <GraphNode key={`node-${index}`} x={x} y={y}>
      )}
    </>
  )
}

Is there a way to handle positional updates outside of react? How do animation libraries such as framer-motion surpass react render cycle and optimise re-renders?