In my react native app I have subscribed to CartProduct data model inside the useEffect hook and using a return function I have canceled the subscription which should run when the component unmounts. But this doesn't seem to work because when I change the CartProduct model from a different screen I can see in the console that getCartProduct() run. How to fix this?
const[cartProducts, setcartProducts] = useState <CartProduct[]>([]);
const currentUserId = "28ab9cfc-6f0e-4cb4-9ac8-c875aecc7"
const getCartProduct = async () => {
await DataStore.query(CartProduct, c=>c.userID("eq", currentUserId)).then(setcartProducts);
console.log("fetching!")
};
useEffect(() => {
const subscription = DataStore.observe(CartProduct, d=>d.userID("eq", currentUserId)).subscribe(msg =>
getCartProduct(),
);
return subscription.unsubscribe;
}, []);
useEffect(() => {
getCartProduct()
}, []);
Did you try to wrap the useEffect cb with an fat arrow function?
useEffect(() => {
const subscription = DataStore.observe(CartProduct, d=>d.userID("eq", currentUserId)).subscribe(msg =>
getCartProduct(),
);
return ()=> {
console.log("unsubscribe -> ")
subscription.unsubscribe()
};
}, []);