How to properly execute logic right after setState updates the react functional component state?-CodePudding

Currently, I am making a profile page where it will initially fetch the user profile details from an API endpoint. I want to have a loading indicator representing the fetch status. I am now using useState hook where I store a boolean value for isLoading state. However, after reading the documentation about useState it stated that it may be asynchronous. Hence, how do I properly update isLoading to true first then execute the fetch logic? Right now here is my code snippet.

function Profile() {
  const [isLoading, setIsLoading] = useState(false);
  const [user, setUser] = useState(null);
  const { username } = useParams();

  const fetchUserDetails = async (username) => {
    setIsLoading(true);
    try {
      const userRes = await API.graphql({
        query: queries.getUser,
        variables: { username },
      });
      if (userRes.error) {
        throw new Error({ cause: userRes.error });
      }
      setUser(userRes.data.getUser);
      setIsLoading(false);
    } catch (error) {
      console.error(error);
      // push to error page
      setIsLoading(false);
    }
  };

  // Fetch user profile data
  useEffect(() => {
    fetchUserDetails(username);
  }, []);

...

CodePudding user response：

In your example use case you can simply set isLoading to true initially and run your fetch on-mount.

function Profile() {
  const [isLoading, setIsLoading] = useState(true);
  const [user, setUser] = useState(null);
  const { username } = useParams();

  // Fetch user profile data
  useEffect(() => {
    const fetchUserDetails = async (username) => {
      try {
        const userRes = await API.graphql({
          query: queries.getUser,
          variables: { username },
        });
        if (userRes.error) {
          throw new Error({ cause: userRes.error });
        }
        setUser(userRes.data.getUser);
        setIsLoading(false);
      } catch (error) {
        console.error(error);
        // push to error page
        setIsLoading(false);
      }
    };

    fetchUserDetails(username);
  }, []);

but if you want to watch for changes to isLoading say for a reload button, you can set it false initially, set it to true in an on-mount useEffect and have your fetch useEffect dependent on isLoading

function Profile() {
  const [isLoading, setIsLoading] = useState(false);
  const [user, setUser] = useState(null);
  const { username } = useParams();

  // set isLoading to true on-mount
  useEffect(() => {
    setIsLoading(true)
  },[]);

  // Fetch user profile data
  useEffect(() => {
    const fetchUserDetails = async (username) => {
      try {
        const userRes = await API.graphql({
          query: queries.getUser,
          variables: { username },
        });
        if (userRes.error) {
          throw new Error({ cause: userRes.error });
        }
        setUser(userRes.data.getUser);
        setIsLoading(false);
      } catch (error) {
        console.error(error);
        // push to error page
        setIsLoading(false);
      }
    };

    if (isLoading) {
      fetchUserDetails(username);
    }
  }, [isLoading]);

  function triggerReload() {
    setIsLoading(true)
  }

CodePudding user response：

the idea of it is to update the initial isLoading to true inside the fetch function and you did it correctly. what is missing is to add if condition inside the useEffect when isLoading is true then fetch user details.

useEffect(() => {
 if(isLoading){
    fetchUserDetails(username);
 }
}, [isLoading])

this will make the fetch as long the condition is true.