Condition Rendering displays both element

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.

  • 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 :sparkles:

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.