> ## Documentation Index
> Fetch the complete documentation index at: https://replyke-feat-push-rich-payload-fields.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Entity Comments

# `useEntityComments`

## Overview

The `useEntityComments` hook provides a higher-level abstraction for fetching and managing comments related to a specific entity. It handles pagination, sorting, and comment tree structure, allowing you to easily build a threaded comment UI. It’s especially useful when you want to render nested replies and dynamically manage additions or deletions in a structured way.

## Usage Example

```tsx theme={null}
import { useEntityComments } from "@replyke/react-js";

function EntityComments({ entityId }: { entityId: string }) {
  const {
    comments,
    newComments,
    entityCommentsTree,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
    addCommentsToTree,
    removeCommentFromTree,
  } = useEntityComments({ entityId, limit: 10, defaultSortBy: "new" });

  return (
    <div>
      <select
        value={sortBy}
        onChange={(e) => setSortBy(e.target.value as "new" | "top")}
      >
        <option value="new">Newest</option>
        <option value="top">Top</option>
      </select>

      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>

      {loading && <p>Loading...</p>}
      {hasMore && !loading && <button onClick={loadMore}>Load More</button>}
    </div>
  );
}
```

## Parameters & Returns

### Parameters

The hook accepts an object with the following fields:

<ParamField path="entityId" type="string \">
  null\`
</ParamField>

<ParamField path="limit" type="number">
  The number of comments to fetch per page. Default is `10`.
</ParamField>

<ParamField path="defaultSortBy" type="CommentsSortByOptions">
  The default sorting criteria for comments (e.g., `"new"`, `"top"`).
</ParamField>

### Returns

The hook returns an object with the following fields:

<ResponseField name="entityCommentsTree" type="EntityCommentsTree">
  The structured tree of comments, keyed by comment ID.
</ResponseField>

<ResponseField name="comments" type="Comment[]">
  The list of root-level comments (non-new).
</ResponseField>

<ResponseField name="newComments" type="Comment[]">
  Comments recently added during the session.
</ResponseField>

<ResponseField name="loading" type="boolean">
  Indicates whether comments are currently loading.
</ResponseField>

<ResponseField name="hasMore" type="boolean">
  Whether there are more comments available to fetch.
</ResponseField>

<ResponseField name="sortBy" type="CommentsSortByOptions">
  Current sorting method for the comments (`"new"` or `"top"`).
</ResponseField>

<ResponseField name="setSortBy" type="(newSortBy: CommentsSortByOptions) => void">
  Updates the sort order for comments.
</ResponseField>

<ResponseField name="loadMore" type="() => void">
  Loads the next page of comments, if available.
</ResponseField>

<ResponseField name="addCommentsToTree" type="(newComments: Comment[] \">
  undefined, newlyAdded?: boolean) => void\`
</ResponseField>

<ResponseField name="removeCommentFromTree" type="(commentId: string) => void">
  Removes a comment (and its descendants) from the tree structure.
</ResponseField>