Conditional Rendering not waiting for Fetch to Complete

Question

In the App i fetch Data from Firebase/Firestore, parse it to a Interface and add the object to the State Array. After that i want to render it. But react wont render the array. I Have commented the Code that you can see what i thought it should do.

const Tab1: React.FC = () => {

  let spiceArray: singleSpice[] = [];

  interface singleSpice {
    spice: string,
    grams: number,
  }

 

  useEffect(() => {
    //fetch the data --> Works well
    async function loadData() {
      const data = await getCollections();
    // Add the Data to the Spicearray --> Works  
      data.forEach((e: any) => spiceArray.push(e));
    }
    // Trigger Function onComponentMount
    loadData();
    // This function will never log "Worked" even tho the loadData is Async
    if(spiceArray.length > 0){
      console.log("Worked")
    }
    
  })



  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        //Transfer the spiceArray to the next Child as Props --> Works
        <CustomTab1 spices={spiceArray}/>
        <ExploreContainer name="Tab 1 page" />
        <IonButton onClick={() => console.log(spiceArray.length)}> Test me</IonButton>
        
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

Child

    //Interface for Props
    interface Props {
        spices: Spice[];
    }
    //Interface to get access to inner Attributes of the SpiceObjectArray
    interface Spice {
        spice: string;
        grams: number;
    }
    
    const CustomTab1: React.FC<Props> = ({spices}: Props) => {
        return (
        <IonList>
            //Conditional Render 
            {spices.length > 0 && spices.map(entry => <IonItem id={entry.spice}>{entry.spice}</IonItem>)}
            <IonButton onClick={() => console.log(spices)}>Test</IonButton>
        </IonList>
    
        );
      };
    
      export default CustomTab1;

Crazy Thing is. Right now when i F5 the IonicApp none of the spices is Displayed. But when i change the text inside the IoNButton on CustomTab1-Component and save the simple change the spices getting rendered. But if i press F5 to refresh the app everything is gone again.How can i make the app wait until the API delivers the data?

jsonderulo · Accepted Answer · 2022-02-09T21:27:52.510

React doesn't rerender when variables change. You say you are passing the fetched object to the "state array" but spiceArray is not a piece of react state. In a functional component, state is declared with useState.

When your page initially loads, there is no data, and you have the right idea to check if there is first any data before trying to map over/render it. But in order to get the component to rerender and thus recheck if spicesArray has anything in it you must use state and make a change to state.

const [spiceArray, setSpiceArray] = useState<singleSpice[] | null>(null)
  useEffect(() => {
    //fetch the data --> Works well
    async function loadData() {
      const data = await getCollections();
    // Add the Data to the Spicearray --> Works  
     setSpiceArray(data)
    }
    // Trigger Function onComponentMount
    loadData();
    
    // This function will never log "Worked" even tho the loadData is Async
    if (spiceArray.length > 0) {
      console.log("Worked");
    }
  }, []);

your code should look something like this and change child component rendering logic to:

{spices && spices.map(entry => <IonItem id={entry.spice}>{entry.spice}</IonItem>)}

Keep in mind a couple of other things:

if you want useEffect to run only on mount (which is usually the case when fetching data), you need an empty dependency array.
console logging the spiceArray or checking if the spiceArray.length is not 0 will still not work in useEffect because state updates in react are async/ a request to update state for the next render. Therefor, changes will not be immediately reflected/ observable

Okay. that works for the parent Component (Tab1)! i can now properly conditionaly Render in my Tab1.tsx. But when i try to give the spiceArray (which is now a State) to the ChildCOmponent it says i cant do that because it might be `null`. — snux_cs, Feb 09 '22 at 21:17
So i just deleted null and made the Props not mandatory. And so it worked. Thank you very much! — snux_cs, Feb 09 '22 at 21:27
No problem! I updated the answer slightly for how you can check in child with the new logic. basically, you want to check if the spiceArray is truthy then map over elements. If you got it working though i wouldn't worry about it — jsonderulo, Feb 09 '22 at 21:29

score 1 · Answer 2 · answered Feb 09 '22 at 20:48

1

spiceArray is not a state and can't rerender your child component.

change your variable to state

answered Feb 09 '22 at 20:48

Mersad Mirgholami

146
1
8

score 0 · Answer 3 · answered Feb 09 '22 at 20:50

0

Do you not have to await loadData();?

Then move on to if(spiceArray.length > 0){

answered Feb 09 '22 at 20:50

user3067684

936
9
18

i cant do `await loadData();` – snux_cs Feb 09 '22 at 21:03

Conditional Rendering not waiting for Fetch to Complete

3 Answers3