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

# Rendering client state to React

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](/react-native/reference/package-references/react-hooks).