Can I have the initial value of my fetch results not be undefined?

I’ve attached a code snippet. When I first get on this home page the result_data variable is undefined. I have to re-render it for it to have a value. What I’m doing with the result_data variable is rendering the resulting images in a flatlist. I would like the flatlist to have data as soon as a user gets to that page without them having to rerender the page. Is this possible?

 useEffect(() => {
    const fetchRecipes = async () => {
      try {
        // create body for lambda function
        const palette_body = {
          body: {
            recipeCategory: null,
            user_info: { likes, dislikes, survey },
          },
        };

        const response = await fetch(
          `https://25jg62s1m6.execute-api.us-east-1.amazonaws.com/test/kohoquery/palette_analyzer`,
          {
            method: "POST",
            body: JSON.stringify(palette_body),
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        const result_data = await response.json();

        if (typeof result_data.body === "undefined") {
          console.log("No recipes yet");
        } else {
          setResult(JSON.parse(result_data.body));
          console.log("yay!");
        }
        setLoading(false);
      } catch (error) {
        console.log("Error parsing JSON data!!!:", error);
        //setError(error);
        setLoading(false);
      }