React native retrieving data in real time with firebase

Question

i'm retrieving a document collection as this

 const retrieveCollection = async () => {
 
    let questionDocs: Questions[] = [];

    const questionCol = collection(db, "questionsdb");
    const colQuery = query(questionCol);
    const querySnapshot = await getDocs(colQuery);
    querySnapshot.forEach((doc: DocumentData) => questionDocs.push(doc.data()));

   
    setQuestions(questionDocs);
  };

  useEffect(() => {
    retrieveCollection();
  }, []);

Each question has an author, when i click a button i want it to show just my questions, if i click it again, it will show all the other questions. This is my function to do it

 const [myQuestions, setMyQuestions] = useState(false);

  useEffect(() => {
    const showMyQuestions = async () => {
      await retrieveCollection();
      console.log(questions);
      const myQuestionFilter = questions?.filter(
        (item) => item.author.uid === user?.uid
      );

      setQuestions(myQuestionFilter!);
    };

    const showAllQuestions = async () => {
      await retrieveCollection();
      const myQuestionFilter = questions?.filter(
        (item) => item.author.uid !== user?.uid
      );

      setQuestions(myQuestionFilter!);
    };

    myQuestions ? showMyQuestions() : showAllQuestions();
  }, [myQuestions]);

And this is the button

 <TouchableOpacity onPress={() => setMyQuestions(!myQuestions)}>
        <Text>
          {myQuestions ? "My Questions" : "All Questions"}
        </Text>
      </TouchableOpacity>

I only have questions asked by myself, so when MyQuestions is true i should see all questions, and when it's false i should see nothing. But once everything disappears it doesn't comeback. Before i filter the questions array, i call the function retrieveCollection to get all questions and then filter it.

Answer 1

You only fetch all your data when the component mounts and store it in questions . Its value is further manipulated by myQuestions : when true filters questions for items you've posted, and when false filter for ones not posted by you. If you toggled it twice, then you would delete everything in questions and require another api call to be made.

To avoid this, you should have another variable for myQuestions to manipulate, which is used to render the visible questions:

// update your JSX to use this variable
const [visibleQuestions, setVisibleQuestions] = useState(questions || []);
return (
  {/*
   .
   .
   .
  */}
  <TouchableOpacity 
    onPress={() => {
      const newVal = !myQuestions;
      setMyQuestions(newVal);
       const myQuestionFilter = questions?.filter((item) =>{
         const isMyPost = item.author.uid === user?.uid
         return newVal ? isMyPost : !isMyPost
        );
       setVisibleQuestions(myQuestionFilter)
    }}
  }>
    <Text>
      {myQuestions ? "My Questions" : "All Questions"}
    </Text>
  </TouchableOpacity>
)

Doing it this way you arent actually deleting the data sent from firebase and thus you wont have to retrieve it again