https://github.com/linonetwo/use-react-three-fiber-transient-updates

Hooks to do use data with rapidly changed values inside.
https://github.com/linonetwo/use-react-three-fiber-transient-updates

Last synced: about 1 month ago
JSON representation

Hooks to do use data with rapidly changed values inside.

• Host: GitHub
• URL: https://github.com/linonetwo/use-react-three-fiber-transient-updates
• Owner: linonetwo
• License: mit
• Created: 2019-06-22T16:59:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:30:24.000Z (11 months ago)
• Last Synced: 2024-09-29T05:22:28.691Z (about 2 months ago)
• Language: TypeScript
• Size: 61.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-three-transient-updates

[what are transient updates?](https://github.com/react-spring/zustand#transient-updates-for-often-occuring-state-changes)

[Further explain about transient updates.](https://github.com/drcmda/react-three-fiber/issues/61#issuecomment-504472284)

[Discussion about implementation.](https://github.com/drcmda/react-three-fiber/issues/126)

## Usage

Full example: [react-encompass-ecs-example](https://github.com/linonetwo/react-encompass-ecs-example)

```jsx

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) => (

        

          

          

        

      ))}

    >

  );

}

```

```jsx

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 (

     ({ position: [x, y, 0] }))}

      receiveShadow={true}

    >

      

      

    

  );

}

```