Im trying to display a list of recipes but everytime i render it. The No Recipes condition always shows up even if there is an array of list. It shows for a split of a second then the valid list will display
It’s impossible to tell just by those two snippets of code but my guess is that you are calling getAllItems in a useEffect hook?
If so remember that useEffect run on every completed render unless specifically told so.
More on React docs | conditionally firing an event.
For example in your case if you want to fetch only once on mount pass an empty array as second arg:
useEffect(() => {
// your fetching logic
}, [])
But again this is a guess, as there’s not enough info just from the screenshot.
Im sorry about that but heres the useEffect hook block . It doesnt render 2 times. How can i prevent the no-recipes element showing while the recipes is empty or filling in the array
From the logic you have, I guess you can leverage the isLoading state.
So
- isLoading: show a loader UI
- isDone (isLoading = false)
- array is empty: show empty UI
- array is not empty: show items
Which should be striaghtforward to tackle 
I was also having a problem with that
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.