when the page first renders it shows the whole list, then it checks and deletes the ones I subscribed to

Question

I have a problem with react useMemo.

  const [cardlist, setCardList] = useState([]);
  const [subs, setSubs] = useState([]);

  useEffect(() => {
    handleCardList(); // for rendering cards on page first time 
  }, []);
  

  const uniqCard = useMemo(() => _.uniqBy(cardList, '_id'), [cardList]); // precaution for duplicate data

  const filteredCard = useMemo(() => uniqCard.filter((cardList) => !subs.includes(cardList._id)), [uniqCard, subs]); // i want to see cards which is i dont following, so i am filtering again card with subs(array of strings) 

My problem is, when i refresh the page all list coming, then few seconds my functions, deleting cards which is following. But i dont want that. I want when i refresh or open page, directly listing cards i don't follow. Can u help for it? Thanks a lot.

Answer 1

If the subs array is fed with async data, the initial value of subs is an empty array. The filteredCard is calculated as is, without filter (!subs.includes returns true), thus you have the unfiltered data that you don't want. You can keep a loading state and wait for subs so you can filter properly. Also, I don't think you need a uniqCard memo since it only utilizes a loadsh. You can merge these two memos.