Skip to content

Commit

Permalink
update react examples and language (#436)
Browse files Browse the repository at this point in the history
  • Loading branch information
ajwootto authored Oct 18, 2023
1 parent 9d4b3c4 commit a36a5ab
Showing 1 changed file with 8 additions and 31 deletions.
39 changes: 8 additions & 31 deletions docs/sdk/client-side-sdks/react/react-gettingstarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ There are two ways to initialize the SDK:
your application will be ready to use the SDK.
* Blocking: This allows you to delay the rendering of your application until the request to initialize the SDK is completed.

To use these providers, you must get the SDK Key from the DevCycle Dashboard.
To use the provider, you must get the SDK Key from the DevCycle Dashboard.
You can optionally pass in a user object to the provider to initialize the SDK.
If you do not pass in a user to the provider, it will create an anonymous user and initialize the SDK with it.
You can then call the `identifyUser` method on the client once the user has been authenticated.
Expand All @@ -30,23 +30,24 @@ See [Identifying Users & Setting Properties](/sdk/features#identify) for more de
## Non-Blocking

The withDevCycleProvider higher-order component (HOC) initializes the React SDK and wraps your root component. This provider may cause your app
to flicker when it is first rendered, as it is waiting for the SDK to initialize.
to flicker when it is first rendered, as all DevCycle variables will return their default values until the SDK is initialized.

```js
import { withDevCycleProvider } from '@devcycle/react-client-sdk'
```
```js
function App() {
return <TheRestofYourApp/>
}
export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(App)
```

## Blocking

The `useIsDevCycleInitialized` hook allows you to block rendering of your application until SDK initialization is complete. This ensures your app does not flicker due to value changes and enables you to control what you want displayed when initialization isn't finished yet.
The `useIsDevCycleInitialized` hook allows you to block rendering of your application until SDK initialization is complete.
This ensures your app does not flicker due to value changes and enables you to control what you want displayed when initialization isn't finished yet.

```js
import { useIsDevCycleInitialized, withDevCycleProvider } from '@devcycle/react-client-sdk'
```
```js

function App() {
const dvcReady = useIsDevCycleInitialized()

Expand All @@ -57,30 +58,6 @@ function App() {
export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(App)
```

:::caution

The `asyncWithDVCProvider` function has been deprecated as of version 1.3.0

:::

The `asyncWithDVCProvider` function is similar to the `withDevCycleProvider` function, but allows you to block rendering of your application
until SDK initialization is complete. This ensures your app does not flicker due to value changes.

```js
import { asyncWithDVCProvider } from '@devcycle/react-client-sdk'
```
```js
(async () => {
const DevCycleProvider = await asyncWithDVCProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })

ReactDOM.render(
<DevCycleProvider>
<App />
</DevCycleProvider>
)
})();
```

## Deferred Initialization
In many cases, user data is not available at the time the `DevCycleProvider` is created. If the provider is not passed a
`user` object, then by default the SDK will be instantiated with an "anonymous" user and a configuration will be
Expand Down

1 comment on commit a36a5ab

@vercel
Copy link

@vercel vercel bot commented on a36a5ab Oct 18, 2023

Choose a reason for hiding this comment

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

Please sign in to comment.