-
Notifications
You must be signed in to change notification settings - Fork 12
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.
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
[Feature Request] Support Suspense #192
Comments
Thanks @tjosepo for the suggestion. Our team will review this.
Could you clarify what you mean here? You can use the Do neither of these approaches allow you to implement your suspense hook? |
The I don't know if this is by design or if this is a bug in the library. If That being said, I also think there is value in officially supporting Suspense in the SDK, rather than require users to create their own custom hooks given that Suspense is a first-class feature in React. |
Hi @tjosepo , You are right. When This is something that we will review for next breaking change release for sure, to make the client available on initialization and support Suspense. But we need to discuss it with the team, for instance, to decide if we should provide a new hook as your proposal, or a new In the meantime, you can consider using the Using the import { SplitFactoryProvider, SplitSdk, useSplitTreatments, IUseSplitTreatmentsOptions } from '@splitsoftware/splitio-react';
function shouldSuspend(client: any) {
const status = client.__getStatus();
return !status.isReady && !status.isReadyFromCache && !status.hasTimedout;
}
function useSplitTreatmentsSuspense(options: IUseSplitTreatmentsOptions) {
const result = useSplitTreatments(options);
if(shouldSuspend(result.client)) {
throw new Promise<void>((resolve) => {
result.client!.once(result.client!.Event.SDK_READY_TIMED_OUT, resolve);
result.client!.once(result.client!.Event.SDK_READY_FROM_CACHE, resolve);
result.client!.once(result.client!.Event.SDK_READY, resolve);
});
}
return result;
}
function MyComponent() {
const { treatments } = useSplitTreatmentsSuspense({ names: [MY_FEATURE_FLAG] });
return treatments[MY_FEATURE_FLAG].treatment === 'on' ?
<MyComponentOn /> :
<MyComponentOff />;
}
const mySplitFactory = SplitSdk(MY_SPLIT_CONFIG);
export const App = () => {
return (
<SplitFactoryProvider factory={mySplitFactory} >
<Suspense fallback={<Loading />}>
<MyComponent />
</Suspense>
</SplitFactoryProvider>
);
} And thanks for highlighting the importance of supporting Suspense :) |
For the record, we have released v2 of the React SDK, and the So, the implementation of the experimental function useSplitTreatmentsSuspense(options: IUseSplitTreatmentsOptions) {
const result = useSplitTreatments(options);
if (shouldSuspend(result.client)) {
throw new Promise<void>((resolve) => {
// @ts-expect-error `init` method is not part of the public API
result.factory.init && result.factory.init();
result.client!.once(result.client!.Event.SDK_READY_TIMED_OUT, resolve);
result.client!.once(result.client!.Event.SDK_READY_FROM_CACHE, resolve);
result.client!.once(result.client!.Event.SDK_READY, resolve);
});
}
return result;
} |
Hi,
I hope you are having a great day where you are.
I've been trying the React SDK, and there's something I think SDK could really benefit from.
Problem
Currently, all the hooks of the client require the consumer to wait until the client is ready before trying to use their values.
This forces consumers of the library to code very defensively and add checks to
isReady
in every single component that uses Split.Some use-cases, like setting a default value from a feature flag, become very difficult because of this.
Proposal
Suspsense data-fetching could solves this problem by making the component suspend until the client is ready. This way, the user never has to check if the client is ready -- if the component successfully renders, the client is guaranteed to be ready.
This could be implemented in a new hooks, called
useSplitTreatmentsSuspense
.Under the hood, the
useSplitTreatmentsSuspense
would throw a promise and suspend when the client is not ready. This promise would resolve once the client becomes ready, resuming the rendering of the component.Unfortunately, there is currently no way to implement Suspense data-fetching in user-land when using the React SDK. This is because the Split client is completely hidden from the consumers of the library until the client is ready, preventing the user from listening to the activation event of the client and implementing
useSplitTreatmentsSuspense
themselves. This forces users who want to use Suspense to fallback to the JavaScript SDK.Let me know what you think about this proposal, and let me know if I can help with anything.
The text was updated successfully, but these errors were encountered: