> ## Documentation Index
> Fetch the complete documentation index at: https://www.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Rendering client state to React

<Card title="Recommended: JavaScript SDK for React Native" icon="react" color="#4779FE">
  While this SDK is still supported, we recommend using newer [JavaScript SDK](/docs/javascript/reference/react-native-quickstart), which is optimized for React Native, but also comes with a host of other benefits.
</Card>

Our client was built in vanilla javascript, and therefore its state is not able to trigger React
rerenders out of the box upon mutation.

But fear not, for we have a simple, lightweight solution to this problem: the react-hooks package.
It provides you with the `useReactiveClient` hook, which wraps the client in a proxy that is ready to be used
directly inside JSX.

<Note>
  Since our client was built with a modular approach, this package comes as a
  standalone, so to reduce the client's package size.
</Note>

## Installation

Simply run the following in your terminal:

<Tabs>
  <Tab title="expo">
    ```bash Shell theme={"system"}
    npx expo install @dynamic-labs/react-hooks
    ```
  </Tab>

  <Tab title="npm">
    ```bash Shell theme={"system"}
    npm install @dynamic-labs/react-hooks
    ```
  </Tab>

  <Tab title="yarn">
    ```bash Shell theme={"system"}
      yarn add @dynamic-labs/react-hooks
    ```
  </Tab>
</Tabs>

## Using client's state inside JSX

All you need to do is wrap your client with `useReactiveClient` inside your component.

> This wraps the client in a proxy that keeps track of, for each render, which variables you have accessed.
> As soon as one of these variables' state mutates, React automatically rerenders, and the cycle restarts.
> This means **you only trigger rerenders for variables you are actually reading from**, keeping rerenders to a minimum.

```typescript theme={"system"}
import { createClient } from '@dynamic-labs/client';
import { useReactiveClient } from '@dynamic-labs/react-hooks'

const dynamicClient = createClient({
  environmentId: ''
});

export const useDynamic = () => useReactiveClient(dynamicClient)
```

```typescript theme={"system"}
import { useDynamic } from '<path to client file>';

export function Home() {
  const { auth } = useDynamic();

  return (
    <>
      <View>
        <Text>JWT:</Text>
        <Text>{auth.token}</Text>
      </View>

      <View>
        <Text>User:</Text>
        <Text>{auth.authenticatedUser?.email}</Text>
      </View>

      <Button title="Logout" onPress={() => auth.logout()} />
    </>
  )
}
```

You can read more about our react hooks package [here](/docs/react-native/reference/package-references/react-hooks).