fix: avoid startTransition in React Native #178
Conversation
src/FlagProvider.tsx
Outdated
| @@ -23,7 +23,11 @@ const offlineConfig: IConfig = { | |||
| // save startTransition as var to avoid webpack analysis (https://github.com/webpack/webpack/issues/14814) | |||
| const _startTransition = 'startTransition'; | |||
| // fallback for React <18 which doesn't support startTransition | |||
| const startTransition = React[_startTransition] || (fn => fn()); | |||
| const isReactNative = typeof navigator !== 'undefined' && navigator?.product === 'ReactNative'; | |||
There was a problem hiding this comment.
since this detection may not work in every ReactNative context I'm also considering config option disableTransitions
There was a problem hiding this comment.
startTransition?: boolean on provider makes sense. With useCallback inside provider.
There was a problem hiding this comment.
Does it make sense to make an automatic detection that doesn't work all the time? If that's the case I think a config option is a better approach.
What do we use this hook for?
There was a problem hiding this comment.
The hook was added to solve some hydration error: #125
There was a problem hiding this comment.
I also prefer config over imperfect feature detection
There was a problem hiding this comment.
@Tymek your proposal seems fine with optional startTransition. But maybe instead of boolean config we can allow code injection instead?
There was a problem hiding this comment.
startTransition={fn => fn()} would solve the problem in the user space
src/FlagProvider.tsx
Outdated
| @@ -23,7 +23,11 @@ const offlineConfig: IConfig = { | |||
| // save startTransition as var to avoid webpack analysis (https://github.com/webpack/webpack/issues/14814) | |||
| const _startTransition = 'startTransition'; | |||
| // fallback for React <18 which doesn't support startTransition | |||
| const startTransition = React[_startTransition] || (fn => fn()); | |||
| const isReactNative = typeof navigator !== 'undefined' && navigator?.product === 'ReactNative'; | |||
There was a problem hiding this comment.
startTransition?: boolean on provider makes sense. With useCallback inside provider.
About the changes
Unleash SDK uses startTransition under the hood. RN 0.75 and 0.76 (latest) break on startTransition (facebook/react-native#44586). React itself removed internal _callbacks set on the transition (acdlite/react@12a387d) while RN still has it.
This PR performs feature detection to find if the code is running in RN and skips startTransition in a similar way as we do for older React versions.
Ideally this PR should not be needed but until RN supports the new startTransition we may need to have this fallback.
Important files
Discussion points