> For the complete documentation index, see [llms.txt](https://fivem-react.gitbook.io/fivem-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fivem-react.gitbook.io/fivem-react/hooks/use-nui-data.md).

# useNuiData

## Overview

The `useNuiData` hook listens for updates to specific data values sent from the FiveM client-side Lua to the NUI (React) interface. It provides a way to subscribe to data changes associated with a particular key and manage the data within React components.

## Usage

### Importing the Hook

```tsx
import { useNuiData } from "@yankes/fivem-react/hooks";
```

### Parameters

<table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th><th data-type="checkbox">Optional</th></tr></thead><tbody><tr><td><strong><code>dataId</code></strong></td><td><code>string</code></td><td>The unique key associated with the data that you want to listen for.</td><td>false</td></tr><tr><td><strong><code>initialValue</code></strong></td><td><code>T or undefinded</code></td><td>The initial value for the data. If no initial value is provided, it defaults to undefinded</td><td>true</td></tr></tbody></table>

### Return Value

The hook returns the current data value corresponding to the specified `key`. If no data is received yet, it will return the `initialValue` (if provided) or `undefined`.

## Example

### ReactJS

```tsx
import React, { useState } from "react";
import { useNuiData } from "@yankes/fivem-react/hooks";

type UserData = {
    userId: number;
    userName: string;
};

export const UserProfile = () => {
    const userData = useNuiData<UserData>("user-profile");

    return (
        <div className="user-profile">
            <h1>User Profile</h1>
            {userData ? (
                <>
                    <p>User ID: {userData.userId}</p>
                    <p>User Name: {userData.userName}</p>
                </>
            ) : (
                <p>Loading user data...</p>
            )}
        </div>
    );
};

```

### LUA

```lua
RegisterCommand("send_user_profile", function()
    SendNUIMessage({
        eventName = "nui:data:update",
        dataId = "user-rofile",
        data = {
            userId = 11,
            userName = "john.doe"
        }
    })
end, false)
```

### How It Works

* The React component calls `useNuiData` with a `dataId` (e.g., `"user-profile"`) to subscribe to updates for the specific data associated with that key.
* When the FiveM client executes the `SendNUIMessage` function in Lua, the NUI (React) interface receives the message and updates the data.
* The `useNuiData` hook listens for the `nui:data:update` event and checks if the received data matches the specified `dataId`.
* If the `dataId` matches, the hook updates the React state, causing the component to re-render with the new data.

## Notes

* Ensure that the `dataId` used in `SendNUIMessage` matches the one in `useNuiData`.
* The hook will only update the state for the specified `dataId`, making it easy to manage multiple data streams in a single NUI interface.
* The hook automatically cleans up the event listener when the component unmounts to prevent memory leaks.

## Conclusion

The `useNuiData` hook provides a convenient way to manage and subscribe to specific pieces of data in your NUI (React) interface. It simplifies handling updates from Lua and keeps your React components in sync with the game state. This makes it ideal for situations where different parts of your UI depend on various dynamic data sources.