Commit Graph

2 Commits

Author SHA1 Message Date
Kacie Bawiec 7ebafc0066 Add animation queue to modern createAnimatedComponent
Summary:
Add animation queuing back into createAnimatedComponent_EXPERIMENTAL.js, which is a concurrent-safe version of createAnimatedComponent.

T93269035 for details on why this is needed.

# How does this work?

In the old createAnimatedComponent, Animations were queued by calling `setWaitingForIdentifier` before render, and then calling `unsetWaitingForIdentifier` after render.

In this diff, instead we are calling `setWaitingForIdentifier` in an `useLayoutEffect` before calling `useAnimatedProps`, and we are calling `unsetWaitingForIdentifier` in a `useEffect` after `useAnimatedProps`. So the ordering for the effects are:

1. `useLayoutEffect` with `setWaiting`
2. `useLayoutEffect`s in `useAnimatedProps`
3. `useEffect`s in `useAnimatedProps`
4. `useEffect` with `unsetWaiting`.

There's a React guarantee that **if one effect is called, all of them will be called**, so we don't have a concern about the queue getting locked.

## **Main concerns:**
1. This works in my test cases, but it's not the same behavior as the old createAnimatedComponent (which is wait before and unset wait after render). This may still be ok because the relevant side effects in render from that component have been moved to `useLayoutEffect` or `useEffect` in `useAnimatedProps` (so the ordering is still the same?).
2. I'm not sure about the ordering of `onLayoutEffect`, `onLayout` callbacks, and `useEffect`. createAnimatedComponent_EXPERIMENTAL doesn't use `onLayout`, but with this new method of queuing, **`onLayout` calls will likely be called before the animation queue has been flushed**. It's not clear to me whether this is bad.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D29467458

fbshipit-source-id: 2be23a8968404526d0fa394a7879fda8b5ffbfdc
2021-07-08 09:29:38 -07:00
Tim Yung c774f9e97e Animated: Support Concurrent Rendering
Summary:
Creates a `useAnimatedProps` hook that is compatible with concurrent mode, and uses this in `createAnimatedComponent_EXPERIMENTAL`.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D28390393

fbshipit-source-id: d8aa471507a5d096832b93caf63a24f71733deda
2021-06-06 17:08:55 -07:00