[v9 canary builds] useTransition breaks with @next canary builds

[zachintosh]

🐛 Bug Report

This may be a known issue already, but I was unable to find it recorded anywhere.

In the latest canary builds (which get installed per the recommendations in the react-use-gesture docs), attempting to use useTransition breaks in a couple of ways.

This only happens on the canary builds. Switching to the latest beta build instead does not have this issue.

Here are the two errors I'm seeing:

Uncaught TypeError: Cannot read property 'ref' of null
    at useTransition (index.js?f239:1366)
    at StatusOverlay (StatusOverlay.js?516a:142)
    at renderWithHooks (react-dom.development.js?7f13:14826)
    at updateFunctionComponent (react-dom.development.js?7f13:17059)
    at mountLazyComponent (react-dom.development.js?7f13:17373)
    at beginWork (react-dom.development.js?7f13:18636)
    at HTMLUnknownElement.callCallback (react-dom.development.js?7f13:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?7f13:238)
    at invokeGuardedCallback (react-dom.development.js?7f13:293)
    at beginWork$1 (react-dom.development.js?7f13:23235)

Or this error:

TypeError: transitions.map is not a function
    at MessageHub (https://7mqy09jyq.csb.app/src/index.js:194:18)
    at renderWithHooks (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:12749:18)
    at mountIndeterminateComponent (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:14679:13)
    at beginWork (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15203:16)
    at performUnitOfWork (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:18789:12)
    at workLoop (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:18829:24)
    at renderRoot (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:18912:7)
    at performWorkOnRoot (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19809:7)
    at performWork (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19721:7)
    at performSyncWork (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19695:3)
    at requestWork (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19564:5)
    at scheduleWork (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19373:5)
    at scheduleRootUpdate (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20041:3)
    at updateContainerAtExpirationTime (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20069:10)
    at updateContainer (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20126:10)
    at ReactRoot.render (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20422:3)
    at eval (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20559:14)
    at unbatchedUpdates (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19924:10)
    at legacyRenderSubtreeIntoContainer (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20555:5)
    at Object.render (https://7mqy09jyq.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20624:12)
    at evaluate (https://7mqy09jyq.csb.app/src/index.js:273:19)
    at Qr (https://codesandbox.io/static/js/sandbox.66fc32c16.js:1:180402)
    at e.value (https://codesandbox.io/static/js/sandbox.66fc32c16.js:1:196982)
    at e.value (https://codesandbox.io/static/js/sandbox.66fc32c16.js:1:219090)
    at e.value (https://codesandbox.io/static/js/sandbox.66fc32c16.js:1:218694)
    at https://codesandbox.io/static/js/sandbox.66fc32c16.js:1:257727
    at d (https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:13828)
    at Generator._invoke (https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:13616)
    at Generator.e.<computed> [as next] (https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:14250)
    at t (https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:8537)
    at i (https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:8747)

To Reproduce

Go to any of the following examples provided in the docs:
https://codesandbox.io/s/vqpqx5vrl0?from-embed (cannot find ref)
https://codesandbox.io/s/1wqpz5mzqj?from-embed (transitions.map is not a func)
https://codesandbox.io/s/7mqy09jyq?from-embed (transitions.map is not a func)
https://codesandbox.io/s/basic-usetransition-masonry-grid-b02eq (transitions.map is not a func)

Switch the react-spring dependency to the latest canary build (might have to click "edit sandbox" first to be able to do it).

Expected behavior

Either it should work as intended, or if there are breaking changes being made, maybe the react-use-gesture docs should not instruct users to install via the @next tag until those changes are documented.

Environment

• react-spring v9.x.x
• react v16.8.x

Thanks for all your hard work! react-spring is awesome. Takes our product to the next level.

[aleclarson]

The latest canary has a new useTransition API.

More info: #809