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

# Hooks

Hooks let you interact with Membrane resources from React components. They handle async operations and state management automatically.

Get the Membrane client instance with `useMembrane()`:

```jsx theme={null}
import { useMembrane } from '@membranehq/react'

function MyComponent() {
  const membrane = useMembrane()
  // Use membrane.ui.connect(), membrane.action(), etc.
}
```

## Hooks for individual entities

Hooks for individual entities are used to fetch and manage data for a single workspace element such as [Flow](/reference/workspace-elements/flows) or [Field Mapping](/reference/workspace-elements/field-mappings).

They have the following structure:

```jsx theme={null}
useFlow(selector: FlowSelector): {
    flow: undefined | Flow;
    apply: ((integrationKeys: string[]) => Promise<Flow[]>);
    reset: (() => Promise<Flow>);
    refresh: (() => Promise<Element>);
    accessor: undefined | FlowAccessor;
    loading: boolean;
    saving: boolean;
    error: any;
    refreshing: boolean;
    create: ((data: CreateFlowRequest) => Promise<undefined | Flow>);
    patch: ((data: Partial<UpdateFlowRequest>) => Promise<void>);
    put: ((data: UpdateFlowRequest) => Promise<void>);
    archive: (() => Promise<void>);
}
```

Here is what each part of it means:

<table className="stripe w-full">
  <tbody>
    <tr>
      <td><code>selector</code></td>
      <td>String or object that uniquely identifies the entity. It can be the entity's ID or a combination of entity key and connection selector.</td>
    </tr>

    <tr>
      <td><code>flow</code></td>
      <td>Current state of the entity</td>
    </tr>

    <tr>
      <td><code>apply</code></td>
      <td>Applies universal entity to selected integrations</td>
    </tr>

    <tr>
      <td><code>reset</code></td>
      <td>Resets entity to its initial state (only works for entities that have parents)</td>
    </tr>

    <tr>
      <td><code>refresh</code></td>
      <td>Refresh entity data from the server</td>
    </tr>

    <tr>
      <td><code>accessor</code></td>
      <td>SDK-provided object for working with the entity.</td>
    </tr>

    <tr>
      <td><code>loading</code></td>
      <td>Whether initial data is being loaded</td>
    </tr>

    <tr>
      <td><code>saving</code></td>
      <td>Whether entity is being saved to the server</td>
    </tr>

    <tr>
      <td><code>error</code></td>
      <td>Error that occurred during last operation</td>
    </tr>

    <tr>
      <td><code>refreshing</code></td>
      <td>Whether entity is being refreshed from server</td>
    </tr>

    <tr>
      <td><code>create</code></td>
      <td>Create new entity</td>
    </tr>

    <tr>
      <td><code>patch</code></td>
      <td>Partially update entity</td>
    </tr>

    <tr>
      <td><code>put</code></td>
      <td>Fully update entity (replace all its properties with provided ones)</td>
    </tr>

    <tr>
      <td><code>archive</code></td>
      <td>Archive (soft delete) entity</td>
    </tr>
  </tbody>
</table>

## Hooks for lists

Hooks for fetching lists of entities look like this:

```jsx theme={null}
useFlows(query?): {
    items: Flow[];
    refresh: (() => Promise<void>);
    refreshing: boolean;
    loadMore: (() => Promise<void>);
    loadingMore: boolean;
    loading: boolean;
    error: any;
}
```

Here is what each part of it means:

<table className="stripe w-full">
  <tbody>
    <tr>
      <td><code>query</code></td>
      <td>Query for fetching / filtering the list of entities</td>
    </tr>

    <tr>
      <td><code>items</code></td>
      <td>Current list of entities (including all the loaded pages)</td>
    </tr>

    <tr>
      <td><code>loadMore</code></td>
      <td>Load the next page of entities from the server (if there is no more pages - nothing will happen)</td>
    </tr>

    <tr>
      <td><code>loadingMore</code></td>
      <td>Whether more entities are being loaded from the server</td>
    </tr>

    <tr>
      <td><code>refresh</code></td>
      <td>Refresh the list of entities from the server (if multiple pages were fetched previously - only the first page will remain after the refresh)</td>
    </tr>

    <tr>
      <td><code>loading</code></td>
      <td>Whether the list is being loaded from the server</td>
    </tr>

    <tr>
      <td><code>error</code></td>
      <td>Error that occurred during the last operation</td>
    </tr>
  </tbody>
</table>

## TypeScript Tips

Hooks return fully typed data. Use the exported types for additional type safety:

```typescript theme={null}
import { useConnections, useMembrane } from '@membranehq/react'
import type { Connection } from '@membranehq/sdk'

function ConnectionList() {
  const { items, loading, error } = useConnections()
  // items: Connection[] | undefined
  // loading: boolean
  // error: Error | undefined

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {items?.map((conn: Connection) => (
        <li key={conn.id}>
          {conn.name} {conn.disconnected ? '(disconnected)' : ''}
        </li>
      ))}
    </ul>
  )
}
```

## List of hooks

You can find the full list of hooks and their signatures in the [React Library Reference](https://console.getmembrane.com/ref/react/index.html)