Does order of state variable matters in React?

user_4466404 0
Viewed 81

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.

use-effect react-hooks reactjs javascript
3 Answers

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

user_101401240

In a such case, order does matter.

While React may batch updates in this case, it's not guaranteed and even if it does, it may call the render function with the in-between state.

So, when isLoading is set to false, but user is not yet set, you get an error.

You can fix this by setting the user first, and then making isLoading false.

But the real solution would be to eliminate the unnecessary state variables: isLoading is true while isError is false and user is null, and false otherwise.

So, you can do it like this:

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 [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");
          setIsError(true);
          console.log("here 2");
        }
      })
      .then(result => {
        setUser(result);
      })
      .catch(error => console.log(error))
  }, []);

  console.log(isError);
  if (isError) {
    return <h2>Error...</h2>
  }
  if (user !== null) {
    return <h2>{user.login}</h2>
  }
  return <h2>Loading...</h2>
};

export default MultipleReturns;
user_83761840

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.

user_161082710
Related