Skip to content

Commit ce4a8dc

Browse files
authored
feat: update React guidance according to latest docs (#71)
1 parent 84372a6 commit ce4a8dc

5 files changed

Lines changed: 46 additions & 21 deletions

File tree

skills/analyze-project/SKILL.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -495,7 +495,9 @@ EDUCATE:
495495

496496
**React/Next.js gotchas:**
497497

498-
- Next.js App Router: use `ConfidenceProvider` in the root layout. Server Components use `getFlag('flag.prop', default, context)`; Client Components use the `useFlag('flag.prop', default)` hook. If using the client provider, the rendering file must be a Client Component — extract into `providers.tsx` with `"use client"` if needed.
498+
- When possible, avoid `@spotify-confidence/react`, `@spotify-confidence/sdk`, or `@openfeature/react-sdk` — these are being phased out. Use `@spotify-confidence/openfeature-server-provider-local` which evaluates flags locally via WebAssembly.
499+
- Import `ConfidenceProvider` and `getFlag` from `@spotify-confidence/openfeature-server-provider-local/react-server`. Import `useFlag` from `@spotify-confidence/openfeature-server-provider-local/react-client`.
500+
- Next.js App Router: use `ConfidenceProvider` in the root layout with an evaluation context. Server Components use `getFlag('flag.prop', default, context)` (async). Client Components use the `useFlag('flag.prop', default)` hook and require a `'use client'` directive — extract into `providers.tsx` if needed.
499501
- Never call `useFlag` in a Server Component — use `getFlag` or wrap in a Client Component.
500502
- Place the provider above any `<Suspense>` boundary.
501503

skills/instrument-events/SKILL.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,8 @@ EDUCATE:
160160
| Stack | SDK | Tracking package | Flag evaluation package (if needed) |
161161
|-------|-----|-----------------|-------------------------------------|
162162
| JavaScript/TypeScript (browser) | Confidence JS SDK | `@spotify-confidence/sdk` | `@spotify-confidence/openfeature-web-provider` |
163-
| React (client) | Confidence JS SDK | `@spotify-confidence/sdk` | `@spotify-confidence/openfeature-web-provider` |
164-
| Node.js / Next.js (server) | Confidence JS SDK + Local Resolve | `@spotify-confidence/sdk` | `@spotify-confidence/openfeature-server-provider-local` |
163+
| React / Next.js | Confidence Server Provider (Local Resolve) | `@spotify-confidence/sdk` | `@spotify-confidence/openfeature-server-provider-local` (use `/react-server` for `ConfidenceProvider`/`getFlag`, `/react-client` for `useFlag`) |
164+
| Node.js (server) | Confidence JS SDK + Local Resolve | `@spotify-confidence/sdk` | `@spotify-confidence/openfeature-server-provider-local` |
165165
| Java/Kotlin (server) | Confidence Java SDK | `com.spotify.confidence:sdk` | `com.spotify.confidence:openfeature-provider-local` |
166166
| Python | Confidence Python SDK | `spotify-confidence` | `confidence-openfeature-provider` |
167167
| Go | Confidence Go SDK | `github.com/spotify/confidence-sdk-go` | `github.com/spotify/confidence-resolver/openfeature-provider/go` |
@@ -370,10 +370,11 @@ yarn add @spotify-confidence/sdk
370370
yarn add @openfeature/server-sdk @spotify-confidence/openfeature-server-provider-local
371371
```
372372

373-
For **browser / React (client-side)**:
373+
For **React / Next.js** — use the local-resolve server provider with React subpath exports:
374374
```bash
375-
yarn add @spotify-confidence/sdk @openfeature/web-sdk @spotify-confidence/openfeature-web-provider
375+
yarn add @openfeature/server-sdk @spotify-confidence/openfeature-server-provider-local
376376
```
377+
When possible, avoid `@spotify-confidence/react`, `@spotify-confidence/sdk`, and `@openfeature/react-sdk` — these are being phased out. For event tracking in React / Next.js apps, use the server provider's built-in logging; if you need `confidence.track()`, install `@spotify-confidence/sdk` solely for that purpose.
377378

378379
**Initialize the SDK** at the app's entry point. For server-side Node.js/Next.js:
379380

skills/migrate-eppo/SKILL.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1932,7 +1932,18 @@ flagged the precomputed pattern, do NOT use the client ambient mapping.
19321932
Confidence's JS local-resolve provider ships a Next.js/RSC integration
19331933
that is the direct analogue (fetch the `JS` local-resolve guide in Step 2;
19341934
imports from `@spotify-confidence/openfeature-server-provider-local/react-server`
1935-
and `/react-client`). Map the three layers:
1935+
and `/react-client`).
1936+
1937+
**React Gotchas — When possible, avoid `@spotify-confidence/react`,
1938+
`@spotify-confidence/sdk`, and `@openfeature/react-sdk` — these are
1939+
being phased out.** Always use
1940+
`@spotify-confidence/openfeature-server-provider-local` with its
1941+
`/react-server` export (`ConfidenceProvider`, `getFlag`) and
1942+
`/react-client` export (`useFlag`). Server Components use `getFlag`;
1943+
Client Components use `useFlag` with a `'use client'` directive. Place
1944+
the provider above any `<Suspense>` boundary.
1945+
1946+
Map the three layers:
19361947

19371948
| Eppo (precomputed) | Confidence (React local-resolve) |
19381949
|--------------------|----------------------------------|

skills/migrate-optimizely/SKILL.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3777,9 +3777,15 @@ is implicit). Map by how the result is used:
37773777
- `getVariation` (no impression) has no separate Confidence form —
37783778
Confidence logs exposure on resolve. Note the behavior change.
37793779

3780-
**React SDK mapping.** `@optimizely/react-sdk`
3781-
`@spotify-confidence/react` (or the React local-resolve provider for
3782-
RSC; fetch the JS guide in Step 2):
3780+
**React SDK mapping.** `@optimizely/react-sdk` → Confidence React
3781+
local-resolve provider (`@spotify-confidence/openfeature-server-provider-local`
3782+
with `/react-server` and `/react-client` subpath exports; fetch the JS
3783+
guide in Step 2). **When possible, avoid `@spotify-confidence/react`,
3784+
`@spotify-confidence/sdk`, and `@openfeature/react-sdk` — these are
3785+
being phased out.** Server Components use `getFlag` (from
3786+
`/react-server`); Client Components use `useFlag` (from `/react-client`)
3787+
with a `'use client'` directive. Place the `ConfidenceProvider` above any
3788+
`<Suspense>` boundary:
37833789

37843790
| Optimizely React | Confidence React |
37853791
|------------------|------------------|

skills/migrate-statsig/SKILL.md

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2178,15 +2178,18 @@ user argument; emit a one-time context setup instead.
21782178
| `client.getExperiment("e").get("p", d)` | `get<Type>Value("e.p", d)` | (same — set once) |
21792179

21802180
**React mapping.** Statsig `@statsig/react-bindings` hooks map to
2181-
Confidence's React `useFlag`. **Prefer the local-resolve React integration**
2182-
(server-precomputed / RSC) — the standalone Confidence React SDK
2183-
(`@spotify-confidence/react`) is being phased out. Imports come from
2184-
`@spotify-confidence/openfeature-server-provider-local/react-server`
2185-
(the `<ConfidenceProvider context flags>` RSC component + `getFlag`) and
2186-
`/react-client` (`useFlag`/`useFlagDetails`). Register the provider once on
2187-
the server with `createConfidenceServerProvider` + `OpenFeature.setProviderAndWait`
2188-
(as in the server case). (Validated by typechecking migrated React code
2189-
against provider `0.14.2` + React 19.)
2181+
Confidence's React `useFlag`. **When possible, avoid
2182+
`@spotify-confidence/react`, `@spotify-confidence/sdk`, and
2183+
`@openfeature/react-sdk` — these are being phased out.**
2184+
Always use the local-resolve React integration from
2185+
`@spotify-confidence/openfeature-server-provider-local`: imports come from
2186+
`/react-server` (the `<ConfidenceProvider context flags>` RSC component +
2187+
`getFlag` for Server Components) and `/react-client` (`useFlag` /
2188+
`useFlagDetails` for Client Components — requires `'use client'`
2189+
directive). Place the provider above any `<Suspense>` boundary. Register
2190+
the provider once on the server with `createConfidenceServerProvider` +
2191+
`OpenFeature.setProviderAndWait` (as in the server case). (Validated by
2192+
typechecking migrated React code against provider `0.14.2` + React 19.)
21902193

21912194
| Statsig (React) | Confidence (React, local-resolve) |
21922195
|-----------------|-----------------------------------|
@@ -2200,9 +2203,11 @@ against provider `0.14.2` + React 19.)
22002203
⚠️ **Resolve-mode shift:** Statsig React (client-precomputed) → Confidence
22012204
**server-precomputed**. Client reads stay local/offline, but resolution moves
22022205
to the server, so this needs an RSC server (e.g. Next.js App Router). For a
2203-
pure SPA with no server, fall back to the (deprecated) cached-client web SDK
2204-
`@spotify-confidence/react` (`ConfidenceProvider` + `useFlag` on top of
2205-
`@spotify-confidence/sdk`).
2206+
pure SPA that requires dynamic client-side context modifications the local
2207+
resolve SDK cannot support, the cached-client web SDK
2208+
(`@spotify-confidence/sdk` + `@spotify-confidence/react`) still works but is
2209+
being phased out — prefer migrating to Next.js App Router with the
2210+
local-resolve provider when possible.
22062211

22072212
**Remove Statsig readiness scaffolding.** Statsig examples gate the
22082213
first check behind `await statsig.initialize(...)` /

0 commit comments

Comments
 (0)