When I execute the code below gives an error "Cannot read properties of null (reading 'login')", because it reaches the return statement at the end, which it should not as I already have checks for the boolean before return.

import React, { useState, useEffect } from 'react';
const url = 'https://api.github.com/users/QuincyLarsn';
const MultipleReturns = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(data => {
        if (data.status >= 200 && data.status <= 299)
          return data.json();
        else {
          console.log("here");
          setIsLoading(false);
          setIsError(true);
          console.log("here 2");
        }
      })
      .then(result => {
        setIsLoading(false);
        setUser(result);
      })
      .catch(error => console.log(error))
  }, []);

  console.log(isError);
  if (isLoading)
    return <h2>Loading...</h2>
  if (isError) {
    return <h2>Error...</h2>
  }

  return <h2>{user.login}</h2>

};

export default MultipleReturns;

In the above code if setIsError(true) is placed before setIsLoading(false) in useEffect, then everything works fine but not vice versa, similarly if the url is correct then too things work fine if setUser(result) is placed before setIsLoading(false) and not vice versa. I am not able to figure out why that is the case.

CodePudding user response：

React is not batching state updates from fetch(). It is batched in case of event listeners. This is an async fetch call.

In this sandbox console, you can see that there is a render in between your state updates - setIsLoading(false) and setIsError(true).

So for one render cycle : isLoading is false and isError is also false. That will lead to the error condition.

You can use unstable_batchedUpdates to enforce batching.

import { useEffect, useState } from "react";
import { unstable_batchedUpdates } from "react-dom";
import "./styles.css";

const url = "https://api.github.com/users/QuincyLarsn";
const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((data) => {
        if (data.status >= 200 && data.status <= 299) return data.json();
        else {
          console.log("here");
          unstable_batchedUpdates(() => {
            setIsLoading(false);
            setIsError(true);
          });
          console.log("here 2");
        }
      })
      .then((result) => {
        setIsLoading(false);
        setUser(result);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  console.log("isError", isError);
  if (isLoading) return <h2>Loading...</h2>;
  if (isError) return <h2>Error...</h2>;

  return <h2>{user.login}</h2>;
};

export default App;

Corrected Sandbox Link

CodePudding user response：

After you set isLoading as false, the code moves to the last return statement as the error is still false at the moment. So first setting the error blocks the code at the second return statement.

Similarly if you set isLoading as false then set the user, the code will move to the last return statement before the user is set and it will show error. Setting the user and then making isLoading as false shows the user perfectly.