Skip to content

fix: avoid startTransition in React Native #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 31, 2024
Merged

fix: avoid startTransition in React Native #178

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5213457
fix: avoid startTransition in React Native
kwasniew Oct 30, 2024
a503045
expose state transition on provided
kwasniew Oct 31, 2024
4a336f2
expose state transition on provided
kwasniew Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/FlagProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since this detection may not work in every ReactNative context I'm also considering config option disableTransitions

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

startTransition?: boolean on provider makes sense. With useCallback inside provider.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hook was added to solve some hydration error: #125

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also prefer config over imperfect feature detection

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Tymek your proposal seems fine with optional startTransition. But maybe instead of boolean config we can allow code injection instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

startTransition={fn => fn()} would solve the problem in the user space

// Fallback for React <18 and exclude startTransition if in React Native
const startTransition: (fn: () => void) => void = !isReactNative && React[_startTransition]
? React[_startTransition]
: (fn => fn());

const FlagProvider: FC<PropsWithChildren<IFlagProvider>> = ({
config: customConfig,
Expand Down
Loading