React & React NativeHooksFollowsuseFetchFollowersCount

useFetchFollowersCount

Overview

The useFetchFollowersCount hook fetches the total number of users who are following the current logged-in user. This is useful for displaying follower counts in user profiles or dashboard statistics.

Usage Example

import { useFetchFollowersCount } from "@replyke/react-js";
 
function MyFollowersCounter() {
  const fetchFollowersCount = useFetchFollowersCount();
 
  const getMyFollowersCount = async () => {
    try {
      const result = await fetchFollowersCount();
      console.log(`You have ${result.count} followers`);
    } catch (error) {
      console.error("Failed to fetch followers count:", error.message);
    }
  };
 
  return <button onClick={getMyFollowersCount}>Check My Followers</button>;
}

Advanced Usage with State

import { useFetchFollowersCount } from "@replyke/react-js";
import { useState, useEffect } from "react";
 
function FollowersCountDisplay() {
  const fetchFollowersCount = useFetchFollowersCount();
  const [count, setCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    const loadCount = async () => {
      setLoading(true);
      setError(null);
      try {
        const result = await fetchFollowersCount();
        setCount(result.count);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load count');
      } finally {
        setLoading(false);
      }
    };
 
    loadCount();
  }, [fetchFollowersCount]);
 
  if (loading) return <div>Loading followers count...</div>;
  if (error) return <div>Error: {error}</div>;
 
  return (
    <div className="followers-count">
      <h3>{count ?? 0}</h3>
      <p>Followers</p>
    </div>
  );
}

Usage in Dashboard

import { useFetchFollowersCount } from "@replyke/react-js";
import { useEffect, useState } from "react";
 
function ProfileStats() {
  const fetchFollowersCount = useFetchFollowersCount();
  const [stats, setStats] = useState({ followers: 0 });
 
  useEffect(() => {
    const loadStats = async () => {
      try {
        const followersResult = await fetchFollowersCount();
        setStats(prev => ({ ...prev, followers: followersResult.count }));
      } catch (error) {
        console.error("Failed to load profile stats:", error);
      }
    };
 
    loadStats();
  }, [fetchFollowersCount]);
 
  return (
    <div className="profile-stats">
      <div className="stat-item">
        <span className="stat-number">{stats.followers.toLocaleString()}</span>
        <span className="stat-label">Followers</span>
      </div>
    </div>
  );
}

Parameters & Returns

Parameters

The hook returns a function that takes no parameters.

Returns

The function returns a Promise that resolves to an object containing:

FieldTypeDescription
countnumberThe total number of users following you

Error Handling

The hook will throw errors in the following cases:

  • No project is specified
  • No user is logged in

Use Cases

This hook is commonly used in:

  • User profile pages to display follower counts
  • Dashboard statistics
  • Social media style metrics
  • Navigation badges showing follower numbers
  • Analytics and reporting features