React Web SDK 3.x to 4.0 migration guide

import { withLDProvider, withLDConsumer } from 'launchdarkly-react-client-sdk';
const MyContext = React.createContext(null);

export default withLDProvider({
  clientSideID: 'your-id',
  reactContext: MyContext,
})(App);

const MyComponent = withLDConsumer({ reactContext: MyContext })(({ flags, ldClient }) => (
  <div>{flags.myFlag ? 'on' : 'off'}</div>
));

import { initLDReactContext, createLDReactProvider, useBoolVariation, useLDClient } from '@launchdarkly/react-sdk';

const MyContext = initLDReactContext();
const LDProvider = createLDReactProvider('your-id', { kind: 'user', key: 'user-key' }, {
  reactContext: MyContext,
});

function MyComponent() {
  const myFlag   = useBoolVariation('my-flag', false, MyContext);
  const ldClient = useLDClient(MyContext);
  return <div>{myFlag ? 'on' : 'off'}</div>;
}

import { useLDClientError } from 'launchdarkly-react-client-sdk';
const error = useLDClientError(); // Error | undefined

import { useInitializationStatus } from '@launchdarkly/react-sdk';
const { status, error } = useInitializationStatus();
// status: 'initializing' | 'complete' | 'timeout' | 'failed'
// error: Error | undefined (only present when status === 'failed')

// `asyncWithLDProvider` blocked until flags were ready
const LDProvider = await asyncWithLDProvider({ clientSideID: 'your-client-side-id' });
root.render(<LDProvider><App /></LDProvider>);

// Provider renders immediately. Gate your UI with `useInitializationStatus`
const LDProvider = createLDReactProvider('your-client-side-id', { kind: 'user', key: 'example-user-key' });

function App() {
  const { status, error } = useInitializationStatus();
  if (status === 'initializing') return <LoadingSpinner />;
  if (status === 'failed') return <ErrorMessage error={error} />;
  return <YourApp />;
}

root.render(<LDProvider><App /></LDProvider>);

import { createClient } from '@launchdarkly/react-sdk';

const client = createClient('your-client-side-id', { kind: 'user', key: 'example-user-key' });

export default (WrappedComponent) => {
  return (props) => {
    return <WrappedComponent {...props} ldClient={client} />
  }
}

// Higher-order component
withLDProvider({
  clientSideID: 'your-client-side-id',
  options: { bootstrap: myData },
})(App);

// Async higher-order component
const LDProvider = await asyncWithLDProvider({
  clientSideID: 'your-client-side-id',
  options: { bootstrap: myData },
});

import { createLDReactProvider } from '@launchdarkly/react-sdk';

const LDProvider = createLDReactProvider(
  'your-client-side-id',
  { kind: 'user', key: 'user-key' },
  {
    bootstrap: myData,
  },
);

import { createLDReactProvider } from '@launchdarkly/react-sdk';

const LDProvider = createLDReactProvider(
  'your-client-side-id',
  { kind: 'user', key: 'user-key' },
  {
    startOptions: {
      bootstrap: myData,
    },
  },
);

import { useLDClient } from '@launchdarkly/react-sdk';

const ldClient = useLDClient();
const flags = ldClient.allFlags();