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

# Use Unfollow By Follow Id

# `useUnfollowByFollowId`

## Overview

The `useUnfollowByFollowId` hook allows the current logged-in user to unfollow another user using the specific follow relationship ID. This is useful when you have the follow ID from previous follow operations or when managing detailed follow relationships.

## Usage Example

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

function UnfollowButton({ followId }: { followId: string }) {
  const unfollowByFollowId = useUnfollowByFollowId();

  const handleUnfollow = async () => {
    try {
      await unfollowByFollowId({ followId });
      console.log("Successfully unfollowed the user.");
    } catch (error) {
      console.error("Failed to unfollow user:", error.message);
    }
  };

  return <button onClick={handleUnfollow}>Unfollow</button>;
}
```

## Advanced Usage with State Management

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

function FollowingListItem({
  followId,
  username,
  onUnfollowSuccess
}: {
  followId: string;
  username: string;
  onUnfollowSuccess?: (followId: string) => void;
}) {
  const unfollowByFollowId = useUnfollowByFollowId();
  const [isUnfollowing, setIsUnfollowing] = useState(false);

  const handleUnfollow = async () => {
    setIsUnfollowing(true);
    try {
      await unfollowByFollowId({ followId });
      console.log(`Successfully unfollowed ${username}`);
      onUnfollowSuccess?.(followId);
    } catch (error) {
      console.error(`Failed to unfollow ${username}:`, error);
      alert("Failed to unfollow. Please try again.");
    } finally {
      setIsUnfollowing(false);
    }
  };

  return (
    <div className="following-item">
      <span className="username">{username}</span>
      <button
        onClick={handleUnfollow}
        disabled={isUnfollowing}
        className="unfollow-btn"
      >
        {isUnfollowing ? "Unfollowing..." : "Unfollow"}
      </button>
    </div>
  );
}
```

## Usage with Confirmation Dialog

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

function UnfollowWithConfirmation({
  followId,
  username
}: {
  followId: string;
  username: string;
}) {
  const unfollowByFollowId = useUnfollowByFollowId();
  const [showConfirm, setShowConfirm] = useState(false);
  const [isUnfollowing, setIsUnfollowing] = useState(false);

  const confirmUnfollow = async () => {
    setIsUnfollowing(true);
    try {
      await unfollowByFollowId({ followId });
      setShowConfirm(false);
      console.log(`Unfollowed ${username} successfully`);
    } catch (error) {
      console.error("Failed to unfollow:", error);
    } finally {
      setIsUnfollowing(false);
    }
  };

  return (
    <>
      <button onClick={() => setShowConfirm(true)}>Unfollow</button>

      {showConfirm && (
        <div className="confirm-dialog">
          <p>Are you sure you want to unfollow {username}?</p>
          <button
            onClick={confirmUnfollow}
            disabled={isUnfollowing}
          >
            {isUnfollowing ? "Unfollowing..." : "Yes, Unfollow"}
          </button>
          <button onClick={() => setShowConfirm(false)}>Cancel</button>
        </div>
      )}
    </>
  );
}
```

## Parameters & Returns

### Parameters

The hook returns a function that accepts an object with the following field:

<ParamField path="followId" type="string" required>
  The ID of the follow relationship to remove
</ParamField>

### Returns

The function does not return a value but ensures the unfollow action is executed successfully on the server.

### Error Handling

The hook will throw errors in the following cases:

* No project is specified
* No user is logged in
* No follow ID is provided

### Use Cases

This hook is commonly used when:

* Managing a list of users you're following with specific follow IDs
* Implementing bulk unfollow operations
* Working with detailed follow relationship data
* Building admin interfaces for follow management
* Implementing undo functionality for recent follows

### Related Hooks

* `useUnfollowUserByUserId` - Unfollow using user ID instead of follow ID
* `useFetchFollowing` - Get list of users you're following (with follow IDs)
* `useFollowUser` - Follow a user
* `useFollowManager` - Comprehensive follow state management