0
const [query, setQuery] = useState([])

React.useEffect (() => {   
  fetch(url)
  .then((res) => res.json())
        .then((data) => {
          setQuery(data) 
          console.log(query);           
         handleChange(); 
        })
})

I have 2 issues:

  1. when I console.log(query), it is empty.but console.log(data) shows the correct array, how?
  2. handlechange() is getting executed before the fetch is complete, why?

Thank you!

user26
  • 9
  • 2
  • 2
    Duplicate of [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) – Guy Incognito Sep 18 '20 at 18:07
  • `data` is the response from the API and `query` is the empty array which will be updated asynchronously. That is why logging `query` immediately after calling `setQuery(...)` logs previous value of the `query` which is an empty array – Yousaf Sep 18 '20 at 18:21
  • Also note that you haven't passed a dependency array to `useEffect` hook which will lead to `useEffect` running after each render of your component which is probably not what you want. Pass an empty array as a second argument to make sure `useEffect` runs only once, after an initial render. – Yousaf Sep 18 '20 at 18:24
  • _handlechange() is getting executed before the fetch is complete_ - that can't happen in the code you have included in your question. As `handleChange()` function is called from inside a `then()` block and this `then()` block only executes after the `Promise` returned by `fetch()` has fulfilled, so `handleChange()` function can't possibly be called before `fetch` is complete. – Yousaf Sep 18 '20 at 18:27
  • yes, right. handleChange uses query – user26 Sep 18 '20 at 18:32
  • addind a dependency array sends the array into a loop (not sure why) useRef works though! – user26 Sep 18 '20 at 18:33
  • add an empty dependency array if you want to execute the effect only once. You probably added `query` in the dependency array which will lead to infinite loop – Yousaf Sep 18 '20 at 18:36

1 Answers1

0

You may not understand clearly how useState work. Check here: https://reactjs.org/docs/hooks-state.html

I have 2 issues:

  1. when I console.log(query), it is empty.but console.log(data) shows the correct array, how?

State query will be updated after component is re-called (re-render). So, console here will get old query.

  1. handlechange() is getting executed before the fetch is complete, why?

I think handleChange will be executed after fetch complete. But you case, may be you have use un updated query to use. You can use useEffect to trigger handleChange, It makes sure after query already has been updated. Example:

React.useEffect(() => handleChange(), [query]);
Viet Dinh
  • 1,871
  • 1
  • 6
  • 18
  • got the console.log part. but still unclear about the handleChange()..can't seem to make it work. As soon as my page loads, handleChange is getting executed... – user26 Sep 18 '20 at 19:54
  • Yes, because in first time, value change from `undefined` to empty array. You should also check `data query` in handleChange function. – Viet Dinh Sep 18 '20 at 19:58