> ## 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 Profile Comments

# `useProfileComments`

## Overview

The `useProfileComments` hook provides a higher-level abstraction for fetching and managing user comments. Unlike the lower-level `useFetchComments` hook, this hook centralizes the logic for pagination, sorting, and state management, making it easier to implement a complete comments feed for a user profile.

## Usage Example

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

function UserComments({ userId }: { userId: string }) {
  const {
    comments,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
  } = useProfileComments({ userId, 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="userId" 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>

<ParamField path="includeEntity" type="boolean">
  Whether to include entity details in the fetched comments.
</ParamField>

### Returns

The hook returns an object with the following fields:

<ResponseField name="comments" type="Comment[]">
  The list of user comments fetched so far.
</ResponseField>

<ResponseField name="loading" type="boolean">
  Indicates if 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>