How to avoid first render in react native or how to render only fetch data avoid undefined at once?-CodePudding

i am newly startup react native framework here, i am using useState and useEffect to fetch data from api and store in useStete. when i render or try to fetch data from api, at the first log/render is giving me undefined and the it's giving me data for the API. The first undefined is making problem for me, so i want to avoid the first render for fetching data. it's okay for me to give direct second render for the fetch data for API.

so either how can i overcome undefined here wait until give me fetch data or directly provide me second render avoid first render of undefined.

i am really appriciate your helping,

thanks in advance!

Note: i don't want to initialize State to avoid undefined.

const [data, setData] = useState();
    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts/5")
            .then((response) => response.json())
            .then((data) => setData(data))
            .catch((error) => console.error(error))
    }, []);


console.log(data);

output:

CodePudding user response：

You can avoid first render, but it is not the way you should do it. Instead check if you have data. If not, return null.

You component won’t be render while there is no data.

useEffect(…)
if(!data) return null;
return (<YourComponent />)

CodePudding user response：

I agree with all the previous answers, but I would also add a spinner or a skeleton component, to show that something is happening. If you don't show anything at all, the user might think that nothing is happening, and the app appears jagged/unresponsive.

(In fact the first iPhone appeared more responsive than its Android counterparts just because it had a loading animation, which gave the users the sense that something was happening, even if the process took just as long as it did on Androids)

CodePudding user response：

If you set a default value in the useState: this will be the value before the API request
If you don't set a default value in the useState: the default value before the API request is going to be always undefined

one way around this is to do something as follow:

import React, { useEffect, useState } from "react";

export default function MyComponent() {
  const [data, setData] = useState();
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/5")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error(error));
  }, []);

  if (!data) {
    return <React.Fragment></React.Fragment>;
  }
  console.log(data);

  return <MyChildComponent>{data}</MyChildComponent>;
}

Explanation:

  if (!data) {
    return <React.Fragment></React.Fragment>;
  }
  if (!data) {
    return <></>;
  }
  if (!data) {
    return null;
  }

These options are all the same and they help you avoid rendering anything in case no data is available

CodePudding user response：

Simply display an ActivityIndicator (spinner/loader) while data is still loading on your main return screen

return(
{
  loading?<ActivityIndicator/>:<YourComponents/>
 })

your loading state will be false on your Api or fetch function where you have to set loading true while function is called or set it by default true and false it when your state received all the required data.