React - setting state of an async response

Question

I was wondering if you could comment on best practices in the scenario below: I have a react page and am using an async call to get some data. On the page, I render some of that data that is returned like so. (setTimeout is in there so i can see it load - also API is public so you can see what it returns)

App.js

function App() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      fetch("https://swapi.dev/api/people/1").then((response) =>
        response.json().then((data) => {
          setData(data);
          setIsLoading(false);
          console.log(data);
        })
      );
    }, 2000);
  }, []);

  return (
    <React.Fragment>
      <p>{data.name}</p>  //will be blank until aysnc call completes.  THIS IS FINE.
      <p>{data.films[0]}</p>  //throws an error - trying to access an index that doesn't exist.  PROBLEM
    </React.Fragment>
  );
}

I found a way around this, but I litter my code EVERYWHERE with the following. Plus I have to do it again in child components that i pass this data to.

<p>{isLoading ? "loading..." : data.films[0]}</p>

Does anyone know a better way or best practice for this?

Snow · Accepted Answer · 2020-10-22 23:55:48Z

1

Don't use two state variables, just use one, and check if it's been set yet.

const [data, setData] = useState();

<p>{!data ? "loading..." : data.films[0]}</p>

Plus I have to do it again in child components that i pass this data to.

Maybe only call the child components once the data is loaded?

<div>{data && <SomeChild data={data} />}</div>

Remember that you can use optional chaining too, it can help in these situations

<p>{data?.films[0]}</p>

answered Oct 22, 2020 at 23:55

Snow

4,1463 gold badges16 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bmccormick Over a year ago

Thanks for the chaining operator comment. That solved my problem exactly!

dave · Accepted Answer · 2020-10-22 23:56:21Z

0

I mean in this case specifically it might make sense to just set the initial state to something sensible:

const [data, setData] = useState({
    name: '',
    films: []
});

Otherwise, just don't render at all until you have data:

answered Oct 22, 2020 at 23:56

dave

65.1k6 gold badges81 silver badges98 bronze badges

Collectives™ on Stack Overflow

React - setting state of an async response

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related