Skip to main content

General Rive best practices

Design-time and runtime guidance that applies across platforms.

​
Avoiding Unnecessary Rerenders

When using useRive, keep the hook and its returned <RiveComponent /> together in a dedicated wrapper component. Rive creates an instance when the component mounts, and that instance is tied to the underlying <canvas> element. If React repeatedly unmounts or recreates that canvas, the animation may restart, disappear, or fail to display as expected. 
function RiveAnimation() {
  const { RiveComponent } = useRive({
    src: '/animation.riv',
    stateMachines: 'State Machine 1',
  });

  return <RiveComponent />;
}