React & React NativeHooksFollowsuseUnfollowByFollowId

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

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

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

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:

ParameterTypeRequiredDescription
followIdstringYesThe ID of the follow relationship to remove

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
useFollowManageruseUnfollowUserByUserId