> ## Documentation Index
> Fetch the complete documentation index at: https://rive-react-imperative.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Best Practices

> Performance and usage considerations for Rive in React.

<CardGroup cols={1}>
  <Card title="General Rive best practices" href="/getting-started/best-practices">
    Design-time and runtime guidance that applies across platforms.
  </Card>
</CardGroup>

## 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.

```jsx theme={null}
function RiveAnimation() {
  const { RiveComponent } = useRive({
    src: '/animation.riv',
    stateMachines: 'State Machine 1',
  });

  return <RiveComponent />;
}
```