# @hmans/r3f-lifecycle

> Lifecycle helpers for react-three-fiber.

Latest version **0.0.4** (published 2022-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hmans/r3f-lifecycle
pnpm add @hmans/r3f-lifecycle
yarn add @hmans/r3f-lifecycle
bun add @hmans/r3f-lifecycle
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2022-08-18 |
| First published | 2022-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hendrik Mans |
| Maintainers | hendrik.mans |

## Links

- npm: https://www.npmjs.com/package/@hmans/r3f-lifecycle
- npm.io page: https://npm.io/package/@hmans/r3f-lifecycle

## Recent versions

- 0.0.4 (latest) — 2022-08-18
- 0.0.3 — 2022-08-18
- 0.0.2 — 2022-08-18
- 0.0.1 — 2022-08-18

## README

# @hmans/r3f-lifecycle

## Summary

This package provides a small collection of convenience hooks and components that allow you to hook callbacks into the various lifecycle stages of @react-three/fiber components.

## Motivation

- To provide both hooks and component versions of the same functionality, to let the user stay in comfy JSX land _just a little longer_.
- To provide these lifecycle utility components and hooks in the language of game engines, even though they are just thin wrappers around `useFrame` and `useEffect`.

### OnAwake and useOnAwake

Use the `useOnAwake` hook to execute a function when the component is first mounted. The `state` parameter passed into the callback function contains a reference to the react-three-fiber state.

```tsx
useOnAwake((state) => {
  // do something when the component appears
})
```

`<OnAwake>` lets you do the same thing from JSX:

```tsx
<OnAwake
  fun={(state) => {
    /* do something when the component appears */
  }}
/>
```

### OnDestroy and useOnDestroy

Analogous to `<OnAwake>` and `useOnAwake`, these will execute the given callback function when the component is unmounted.

### OnUpdate and useOnUpdate

Use `useOnUpdate` to provide a callback that gets called every frame.

```tsx
useOnUpdate((dt) => {
  // do something every frame
})
```

> **Note**
> This hook merely wraps R3F's `useFrame` hook, with a minor change to the order of arguments passed in (deltatime first, R3F state second), and is merely provided for consistency with the other hooks.

`<OnUpdate>` lets you do the same thing from JSX:

```tsx
<OnUpdate
  fun={(dt, state) => {
    /* do something */
  }}
/>
```

### Effect and LayoutEffect

`<Effect>` and `<LayoutEffect>` are simple wrappers around React's `useEffect` and `useLayoutEffect` hooks and allow you to declare a callback that will be executed every time the component is rendered, or when one of the optionally provided dependencies has changed.

```tsx
<Effect
  fun={() => console.log("foo has changed to:", foo)}
  dependencies={[foo]}
/>
```

---
_Source: https://npm.io/package/@hmans/r3f-lifecycle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._