How to access a useState variable in a useSubscription

Here is my code, useSubscription can't access new values of a useState variable :

const [sessionChoose, setSessionChoose] = useState<ISession | undefined>();

    useSubscription({
        channel: "tentatives",
        onLiveEvent: (dataTentative: any) => {
            const tentative: ITentative = dataTentative.etudiantFaitNouvelleTentative;
            if (tentative.idSession !== sessionChoose?.id) return;
            console.log("ok");
        }
    })

const [sessionChoose, setSessionChoose] = useState<ISession | undefined>();

    useSubscription({
        channel: "tentatives",
        onLiveEvent: (dataTentative: any) => {
            const tentative: ITentative = dataTentative.etudiantFaitNouvelleTentative;
            if (tentative.idSession !== sessionChoose?.id) return;
            console.log("ok");
        }
    })

8 Replies

kapa.ai•2y ago

Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided code, you are using the useSubscription hook to subscribe to the "tentatives" channel and handle live events. The issue you're facing is that the useSubscription hook can't access the new values of the sessionChoose state variable. The useSubscription hook might be using a stale closure, which means it's using the initial value of sessionChoose instead of the updated value. To fix this issue, you can try using a ref to store the latest value of sessionChoose. Here's an example of how you can modify your code:

import { useRef, useEffect } from 'react';

const [sessionChoose, setSessionChoose] = useState<ISession | undefined>();
const sessionChooseRef = useRef(sessionChoose);

// Update the ref whenever sessionChoose changes
useEffect(() => {
  sessionChooseRef.current = sessionChoose;
}, [sessionChoose]);

useSubscription({
  channel: 'tentatives',
  onLiveEvent: (dataTentative: any) => {
    const tentative: ITentative = dataTentative.etudiantFaitNouvelleTentative;
    if (tentative.idSession !== sessionChooseRef.current?.id) return;
    console.log('ok');
  },
});

import { useRef, useEffect } from 'react';

const [sessionChoose, setSessionChoose] = useState<ISession | undefined>();
const sessionChooseRef = useRef(sessionChoose);

// Update the ref whenever sessionChoose changes
useEffect(() => {
  sessionChooseRef.current = sessionChoose;
}, [sessionChoose]);

useSubscription({
  channel: 'tentatives',
  onLiveEvent: (dataTentative: any) => {
    const tentative: ITentative = dataTentative.etudiantFaitNouvelleTentative;
    if (tentative.idSession !== sessionChooseRef.current?.id) return;
    console.log('ok');
  },
});

In this example, we're using useRef to create a sessionChooseRef and updating its current value whenever sessionChoose changes using the useEffect hook. Then, inside the onLiveEvent callback, we access the latest value of sessionChoose using sessionChooseRef.current. For more information on the useSubscription hook, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/live/useSubscription). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

sunny-greenOP•2y ago

@kapa.ai I would like to add in this code:

    const {data: dataSessions} = useList<ISession>({
        resource: "sessions",
    });

    const {data: dataSessions} = useList<ISession>({
        resource: "sessions",
    });

a way to not make the request at /sessions, but i want to add query like "?populate=true", is this possible to specify it directly in the useList params ?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can add query parameters to the request made by useList by using the params property. In your case, you can add the populate=true query parameter like this:

const { data: dataSessions } = useList<ISession>({
  resource: "sessions",
  params: {
    populate: true,
  },
});

const { data: dataSessions } = useList<ISession>({
  resource: "sessions",
  params: {
    populate: true,
  },
});

This will send a request to /sessions?populate=true. The params property allows you to pass additional query parameters to the API request. For more information on the useList hook, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useList). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

sunny-greenOP•2y ago

@kapa.ai params doesn't exists, please refer to https://refine.dev/docs/api-reference/core/hooks/data/useList/

useList | refine

useList is an extended version of TanStack Query's useQuery that supports all of its features and also adds some more.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Apologies for the confusion earlier. You're right, the params property is not available in the useList hook. Instead, you can use the filters property to send additional query parameters to the API. Here's how you can modify your code:

const { data: dataSessions } = useList<ISession>({
  resource: "sessions",
  filters: [
    {
      field: "populate",
      operator: "eq",
      value: "true",
    },
  ],
});

const { data: dataSessions } = useList<ISession>({
  resource: "sessions",
  filters: [
    {
      field: "populate",
      operator: "eq",
      value: "true",
    },
  ],
});

This will send a request to /sessions?populate=true. The filters property allows you to pass filter query parameters to the API. For more information on the useList hook, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useList). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below

How to access a useState variable in a useSubscription

Did you find this page helpful?