use-three-transient-updates

what are transient updates?

Further explain about transient updates.

Discussion about implementation.

Usage

Full example: react-encompass-ecs-example

import { useComponent } from 'react-encompass-ecs';
import { useTransientDataList } from 'use-three-transient-updates';

function Planes() {
  const { boxes } = useComponent({ boxes: [PositionComponent] });
  const refs = useTransientDataList(boxes, ([{ x, y }]) => ({ position: [x, y, 0] }));
  return (
    <>
      {refs.map((_, index) => (
        <mesh ref={refs[index]} receiveShadow={true} key={index}>
          <planeBufferGeometry attach="geometry" args={[20, 20]} />
          <meshPhongMaterial attach="material" color="#272727" />
        </mesh>
      ))}
    </>
  );
}

import { useComponent } from 'react-encompass-ecs';
import { useTransientData } from 'use-three-transient-updates';

function Plane({ position, index }: { position: { x: number, y: number }, index: number }) {
  return (
    <mesh
      ref={useTransientData({ position }, ({ position: { x, y } }) => ({ position: [x, y, 0] }))}
      receiveShadow={true}
    >
      <planeBufferGeometry attach="geometry" args={[20, 20]} />
      <meshPhongMaterial attach="material" color="#272727" />
    </mesh>
  );
}