You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Multiple providers can be used by passing a `domain` to the `OpenFeatureProvider`:
176
176
177
177
```tsx
178
-
// Flags within this domain will use the a client/provider associated with `my-domain`,
178
+
// Flags within this domain will use the client/provider associated with `my-domain`,
179
179
function App() {
180
180
return (
181
181
<OpenFeatureProviderdomain={'my-domain'}>
@@ -238,11 +238,11 @@ Note that if your provider doesn't support updates, this configuration has no im
238
238
#### Suspense Support
239
239
240
240
> [!NOTE]
241
-
> React suspense is an experimental feature and subject to change in future versions.
241
+
> React suspense is an experimental feature and is subject to change in future versions.
242
242
243
243
244
244
Frequently, providers need to perform some initial startup tasks.
245
-
It may be desireable not to display components with feature flags until this is complete, or when the context changes.
245
+
It may be desirable not to display components with feature flags until this is complete or when the context changes.
246
246
Built-in [suspense](https://react.dev/reference/react/Suspense) support makes this easy.
247
247
Use `useSuspenseFlag` or pass `{ suspend: true }` in the hook options to leverage this functionality.
248
248
@@ -283,22 +283,21 @@ This can be disabled in the hook options (or in the [OpenFeatureProvider](#openf
283
283
284
284
The tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations.
285
285
This is essential for robust experimentation powered by feature flags.
286
-
For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](#hooks) or [provider](#providers) can be associated with telemetry reported in the client's `track` function.
286
+
For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](https://openfeature.dev/docs/reference/technologies/client/web/#hooks) or [provider](https://openfeature.dev/docs/reference/technologies/client/web/#providers) can be associated with telemetry reported in the client's `track` function.
287
287
288
-
The React SDK includes a hook for firing tracking events in the <OpenFeatureProvider> context in use:
288
+
The React SDK includes a hook for firing tracking events in the `<OpenFeatureProvider>` context in use:
289
289
290
290
```tsx
291
-
function MyComponent() {
291
+
function MyComponent() {
292
+
// get a tracking function for this <OpenFeatureProvider>.
293
+
const { track } =useTrack();
292
294
293
-
// get a tracking function for this <OpenFeatureProvider>.
294
-
const { track } =useTrack();
295
+
// call the tracking event
296
+
// can be done in render, useEffect, or in handlers, depending on your use case
297
+
track(eventName, trackingDetails);
295
298
296
-
// call the tracking event
297
-
// can be done in render, useEffect, or in handlers, depending on your use case
298
-
track(eventName, trackingDetails);
299
-
300
-
return <>...</>;
301
-
}
299
+
return <>...</>;
300
+
}
302
301
```
303
302
304
303
### Testing
@@ -365,23 +364,23 @@ class MyTestProvider implements Partial<Provider> {
365
364
> I get an error that says something like: `A React component suspended while rendering, but no fallback UI was specified.`
366
365
367
366
The OpenFeature React SDK features built-in [suspense support](#suspense-support).
368
-
This means that it will render your loading fallback automatically while the your provider starts up, and during context reconciliation for any of your components using feature flags!
367
+
This means that it will render your loading fallback automatically while your provider starts up and during context reconciliation for any of your components using feature flags!
369
368
If you use suspense and neglect to create a suspense boundary around any components using feature flags, you will see this error.
370
369
Add a suspense boundary to resolve this issue.
371
370
Alternatively, you can disable this suspense (the default) by removing `suspendWhileReconciling=true`, `suspendUntilReady=true` or `suspend=true` in the [evaluation hooks](#evaluation-hooks) or the [OpenFeatureProvider](#openfeatureprovider-context-provider) (which applies to all evaluation hooks in child components).
372
371
373
-
> I get odd rendering issues, or errors when components mount, if I use the suspense features.
372
+
> I get odd rendering issues or errors when components mount if I use the suspense features.
374
373
375
374
In React 16/17's "Legacy Suspense", when a component suspends, its sibling components initially mount and then are hidden.
376
375
This can cause surprising effects and inconsistencies if sibling components are rendered while the provider is still getting ready.
377
376
To fix this, you can upgrade to React 18, which uses "Concurrent Suspense", in which siblings are not mounted until their suspended sibling resolves.
378
377
Alternatively, if you cannot upgrade to React 18, you can use the `useWhenProviderReady` utility hook in any sibling components to prevent them from mounting until the provider is ready.
379
378
380
-
> I am using multiple `OpenFeatureProvider` contexts, but they are sharing the same provider or evaluation context. Why?
379
+
> I am using multiple `OpenFeatureProvider` contexts, but they share the same provider or evaluation context. Why?
381
380
382
381
The `OpenFeatureProvider` binds a `client` to all child components, but the provider and context associated with that client is controlled by the `domain` parameter.
383
382
This is consistent with all OpenFeature SDKs.
384
-
To scope an OpenFeatureProvider to a particular provider/context set the `domain` parameter on your `OpenFeatureProvider`:
383
+
To scope an OpenFeatureProvider to a particular provider/context, set the `domain` parameter on your `OpenFeatureProvider`:
385
384
386
385
```tsx
387
386
<OpenFeatureProviderdomain={'my-domain'}>
@@ -391,7 +390,7 @@ To scope an OpenFeatureProvider to a particular provider/context set the `domain
391
390
392
391
> I can import things form the `@openfeature/react-sdk`, `@openfeature/web-sdk`, and `@openfeature/core`; which should I use?
393
392
394
-
The `@openfeature/react-sdk` re-exports everything from its peers (`@openfeature/web-sdk` and `@openfeature/core`), and adds the React-specific features.
393
+
The `@openfeature/react-sdk` re-exports everything from its peers (`@openfeature/web-sdk` and `@openfeature/core`) and adds the React-specific features.
395
394
You can import everything from the `@openfeature/react-sdk` directly.
396
395
Avoid importing anything from `@openfeature/web-sdk` or `@openfeature/core`.
0 commit comments