### Installing R3F-Perf Development Dependency (Bash)
Source: https://github.com/utsuboco/r3f-perf/blob/main/README.md
This command installs the `r3f-perf` library as a development dependency using Yarn. It is required to integrate the performance monitoring tool into a React Three Fiber project.
```bash
yarn add --dev r3f-perf
```
--------------------------------
### Using PerfHeadless and usePerf Hook for Programmatic Access (JSX)
Source: https://github.com/utsuboco/r3f-perf/blob/main/README.md
This snippet illustrates how to use `PerfHeadless` for performance monitoring without a visible UI, combined with the `usePerf` hook to programmatically access performance data. The hook provides reactive access to WebGL context, log data, and a function to get a full report, enabling custom logging or integration with other systems.
```jsx
import { Canvas } from '@react-three/fiber'
import { PerfHeadless, usePerf } from 'r3f-perf'
const PerfHook = () => {
// getPerf() is also available for non-reactive way
const [gl, log, getReport] = usePerf((s) => s[(s.gl, s.log, s.getReport)])
console.log(gl, log, getReport())
return
}
function App() {
return (
)
}
```
--------------------------------
### Integrating Perf Component into React Three Fiber Canvas (JSX)
Source: https://github.com/utsuboco/r3f-perf/blob/main/README.md
This example demonstrates the basic integration of the `Perf` component into a `@react-three/fiber` application. By simply adding `` inside the `