İlk oluşturmadan sonra özel bir kanca nasıl yeniden oluşturulur

bu amaçla kancanızdaki useeffect'i kullanamazsınız bunu deneyin :

kanca :

function useIsUserSubscribed() {
  const currentUserId = useSelector((state) => state.auth.user?.id);


  const checkUser = useCallback(async (publisherId, setUserIsSubscribed) => {
    if (!currentUserId || !publisherId) return;
      try {
        const res = await checkSubscription(publisherId);
        setUserIsSubscribed(true);
      } catch (err) {
        setUserIsSubscribed(false);
      }
    
  }, [currentUserId]);

  return {checkUser};
}

export default useIsUserSubscribed;

bileşen :

const SubscribeUnsubscribeBtn = ({profilePageUserId}) => {
    const [userIsSubscribed,setUserIsSubscribed]=useState(false);
    const { checkUser } = useIsUserSubscribed();

     useEffect(()=>{
        checkUser(profilePageUserId,setUserIsSubscribed)
     },[checkUser,profilePageUserId]);
  
  const onClick = async () => {
    if (userIsSubscribed) {
       // this is an API Call to the backend
      await removeSubscription(profilePageUserId);

    } else {
      // this is an API Call to the backend
      await addSubscription(profilePageUserId);
    }
    // HOW CAN I RERENDER THE HOOK HERE!!!!?
    checkUser(profilePageUserId,setUserIsSubscribed)
  }

  return (
    <button type="button" className="sub-edit-unsub-btn bsc-button" onClick={onClick}>
          {userIsSubscribed ? 'Subscribed' : 'Unsubscribed'}
    </button>
  );
} 

ayrıca, kancanıza bir miktar yükleme durumu ekleyebilir ve işlemin zaten yapılıp yapılmadığını kontrol edebilmeniz için bunları da döndürebilirsiniz

Useısusersubscribed'ın useEffect bir dependece ekleyin.

kanca :

function useIsUserSubscribed(publisherId) {
    const [userIsSubscribed, setUserIsSubscribed] = useState(null);
    const currentUserId = useSelector((state) => state.auth.user?.id);
    // add refresh dependece
    const refresh = useSelector((state) => state.auth.refresh);

    useEffect(() => {
        ...
    }, [publisherId, currentUserId, refresh]);
    ...
}

bileşen :

const onClick = async () => {
    ...
    // HOW CAN I RERENDER THE HOOK HERE!!!!?
    // when click, you can dispatch a refresh flag.
    dispatch(refreshSubState([]))
}

forceUpdate yöntemini açığa çıkarın.

kanca :

function useIsUserSubscribed(publisherId) {
    const [update, setUpdate] = useState({});
    const forceUpdate = () => {
        setUpdate({});
    }  

    return {userIsSubscribed, forceUpdate};
}

bileşen :

const {userIsSubscribed, forceUpdate} = useIsUserSubscribed(profilePageUserId);

const onClick = async () => {
    ...
    forceUpdate();
}

İşte @bitspook kullanıcısı tarafından başka bir çözüm

SubscribeUnsubscribeBtn bağımlılığa sahiptir useIsUserSubscribed, ama useIsUserSubscribed hiçbir şeye bağımlı olma SubscribeUnsubscribeBtn. Yerine, useIsUserSubscribed yerel bir devlet tutuyor. Burada birkaç seçeneğin var.:

1. Redux'u kullandığınızdan, belki de Redux'ta olduğundan, kullanıcının abone olup olmadığına ilişkin durumu bir seviye yukarı taşıyın.
2. İletişim için useIsUserSubscribed iç durumunu değiştirmen gerektiğini.

İçin 1)

  const [userIsSubscribed, setUserIsSubscribed] = useState(null);

bu durumu Redux store'a taşıyın ve useSelector ile kullanın.

İçin 2), bir dizi değeri döndürür ve yalnızca değer yerine kancadan geri çağırır. Bu, bileşenden kancaya geri iletişim kurmanıza izin verecektir.

İçinde useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Sonra içeri onClick, arayabilirsin setUserIsSubscribed(false), kancanın iç durumunu değiştirme ve bileşeninizi yeniden oluşturma.