mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
baa2f7511e
BREAKING CHANGE: changed return array, now it returns only functions in next order: [stop, start, isActive]. Parent component is not re-rendered on loop start/stop.
51 lines
1.6 KiB
Markdown
51 lines
1.6 KiB
Markdown
# `useRafLoop`
|
|
|
|
This hook call given function within the RAF loop without re-rendering parent component.
|
|
Loop stops automatically on component unmount.
|
|
|
|
Additionally hook provides methods to start/stop loop and check current state.
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
import * as React from 'react';
|
|
import { useRafLoop, useUpdate } from 'react-use';
|
|
|
|
const Demo = () => {
|
|
const [ticks, setTicks] = React.useState(0);
|
|
const [lastCall, setLastCall] = React.useState(0);
|
|
const update = useUpdate();
|
|
|
|
const [loopStop, loopStart, isActive] = useRafLoop((time) => {
|
|
setTicks(ticks => ticks + 1);
|
|
setLastCall(time);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div>RAF triggered: {ticks} (times)</div>
|
|
<div>Last high res timestamp: {lastCall}</div>
|
|
<br />
|
|
<button onClick={() => {
|
|
isActive() ? loopStop() : loopStart();
|
|
update();
|
|
}}>{isActive() ? 'STOP' : 'START'}</button>
|
|
</div>
|
|
);
|
|
};
|
|
```
|
|
|
|
## Reference
|
|
|
|
```ts
|
|
const [stopLoop, startLoop, isActive] = useRafLoop(callback: FrameRequestCallback, initiallyActive = true);
|
|
```
|
|
* **`callback`**_: `(time: number)=>void`_ — function to call each RAF tick.
|
|
* **`time`**_: `number`_ — DOMHighResTimeStamp, which indicates the current time (based on the number of milliseconds since time origin).
|
|
* **`initiallyActive`**_: `boolean`_ — whether loop should be started at initial render.
|
|
* Return
|
|
* **`stopLoop`**_: `()=>void`_ — stop loop if it is active.
|
|
* **`startLoop`**_: `()=>void`_ — start loop if it was inactive.
|
|
* **`isActive`**_: `()=>boolean`_ — _true_ if loop is active.
|
|
|