`useRive` React component lifecycle related init issue

Open
#210 4 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the linked StackBlitz reproduction and inspect the useRive hook in @rive-app/react-canvas@4.3.3. Trace initialization across the conditional mount and unmount cycle, then verify that the RiveComponent initializes and autoplays every time it is remounted.

Written by the indexing model from the issue text.

Description

Hello there! 👋

We are using useRive from this library for animations within our DesignSystem, and have noticed a pretty critical React component lifecycle related bug with the useRive hook. 😭
I've produced a simple reproduction of this bug in the latest published version of useRive from @rive-app/react-canvas@4.3.3

https://stackblitz.com/edit/stackblitz-starters-tc2yg6?file=app%2Fpage.tsx

Essentially, when first revealed (mounted), the Rive animation inits and autoplays as expected. However, once it's unmounted and then re-mounted (in this case using a simple conditional render bool) - the rive animation fails to init and autoplay.

Here is a simple code snippet which demonstrates the issue:

...
const [show, setShow] = useState(false);
const { RiveComponent } = useRive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  autoplay: true,
  layout: new Layout({
    fit: Fit.Cover,
    alignment: Alignment.Center,
  }),
});

return (
  <div>
    <button onClick={() => setShow((old) => !old)}>toggle</button>
    {show && <RiveComponent style={{ width: '500px', height: '500px' }} />} {/*<-- this only loads up and plays the very first time it's mounted. :( */}
  </div>
 );
...
Dominant language
TypeScript
Stars
1.2k
Forks
58
Avg merge
3h 23m
Merged PRs (30d)
6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from rive-app/rive-react

All issues in rive-app/rive-react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.