Performance

When frequently changing properties of uikit components and especially when animating properties on every frame. We recommend modifying properties using ref.current.setStyle or using a signal.

This approach is similar to html/css. The following code shows how to animate the background opacity on every frame without interfering with react.

import { Container } from '@react-three/uikit'
import { useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import { signal } from '@preact/signals-core'

export function AnimateBackground() {
    const ref = useRef()
    useFrame(({ clock }) => {
        //continuously animate between 0 and 1
        ref.current.setStyle({ opacity: Math.sin(clock.getElapsedTime()) / 2 + 0.5 })
    })
    return <Container ref={ref} backgroundOpacity={0}></Container>
}

Setting executing setStyle(undefined) resets all changes back to the initial properties provided to the directly to the component.

This approach is similar to react-spring and allows to modify the properties of a uikit component without any property diffing. The following code shows how to animate the background opacity on every frame without interfering with react.

import { Container } from '@react-three/uikit'
import { useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import { signal } from '@preact/signals-core'

export function AnimateBackground() {
    const opacity = useMemo(() => signal(0), []);
    useFrame(({ clock }) => {
        //continuously animate between 0 and 1
        opacity.value = Math.sin(clock.getElapsedTime()) / 2 + 0.5
    })
    return <Container backgroundOpacity={opacity}></Container>
}

The amount of different Material Classes used, directly influences the amount the draw calls. For every new material class, a new draw call has to be on every render. Therefore, we recommend using as little as possible different custom material classes.

Like the material classes, each new font family directly results in one additional draw call. Therefore, minimizing the amount of font families is recommended for GPU Performance.