wait for state to change in the same function?

user_13128170 0
Viewed 296

How can I wait for the url hook to not be empty? handleViewSheet is an on click function and I do not want to use useEffect because of the initial render. Can this be done without useEffect?

const [url, setUrl] = useState('')

const handleViewSheet = () => {

    GetSheet(id).then((res) => {
      if (res) {
        setUrl(res);
      }
    });

    const task = getDocument(url); // url is still empty at this point

}
react-hooks reactjs
1 Answers

It seems like a job for useEffect to be honest, so I would recommand to consider using it (You can handle the first render within the useEffect if you want).

But if you still want to avoid using useEffect, you can use async/await to wait for the promise to finish before using url, along with the setUrl call. Something like this:

const [url, setUrl] = useState('')

const handleViewSheet = async () => {

    let resUrl = await GetSheet(id).then((res) => {
      if (res) {
        setUrl(res);
        return res;
      }
      return '';
    });

    const task = getDocument(resUrl );

}
user_57500160
Related