title: State Variables become null When UseEffect hook is used
body: <p>I'm trying to make new requests whenever user reach the bottom with the following;</p>
  <pre><code>useEffect(() =&gt; {
      const scrolling_function = () =&gt; {
        if((window.innerHeight + window.scrollY) &gt;= document.body.offsetHeight-10){
          window.removeEventListener('scroll',scrolling_function)
          getMoviesFromApi()
        }
      }
      window.addEventListener('scroll', scrolling_function);
  }, [])
  </code></pre>
  <p>But the state objects that I defined, such as:</p>
  <pre><code>const[selectedGenres, setSelectedGenres] = useState(new Set())
  </code></pre>
  <p>All becomes undefined in the inside of my <code>useEffect</code> hook, and thus my <code>getMoviesFromApi()</code> method does not work properly.</p>
  <p>My question is, is that expected behavior? If so, how could I overcome it?</p>
  <p>The <code>getmoviesfromapi</code> method:</p>
  <pre><code>const getMoviesFromApi = async () =&gt; {
      setLoading(true)
      let init, end;
      if(initialYear&gt;endYear) {
        init = endYear
        end = initialYear
      } else {
        init = initialYear
        end = endYear
      }
      let res =await fetchMovies(init, end)
      setLoading(false)
      setMovies(res.results)
    }
  </code></pre>
  <p>The <code>fetchMovies</code> method:</p>
  <pre><code>const fetchMovies = async (startYear, endYear) =&gt; {
      let res;
  
      res = [];
      let genreQuery = &quot;&quot;;
      let serviceQuery = &quot;&quot;;
      for (let it = selectedGenres.values(), val= null; val=it.next().value; ) {
        genreQuery += &quot;&amp;genre=&quot; + val;
      }
      for (let it = selectedServices.values(), val= null; val=it.next().value; ) {
        serviceQuery += &quot;&amp;service=&quot; + val;
      }
  
      let countryQuery = &quot;?country=&quot;+country;
      let yearQuery = &quot;&amp;year_min=&quot;+ startYear +&quot;&amp;year_max=&quot; + endYear;
      let typeQuery = &quot;&amp;type=&quot; + (isMovie ? &quot;movie&quot; : &quot;series&quot;);
      let url = api_url + countryQuery + serviceQuery + typeQuery +&quot;&amp;order_by=year&quot; + yearQuery
            + genreQuery + &quot;&amp;page=1&amp;desc=true&amp;language=en&amp;output_language=en&quot;
  
      await fetch(url, {
        &quot;method&quot;: &quot;GET&quot;,
      }).then(response =&gt; {
            res= response.json()
          })
          .catch(err =&gt; {
            console.error(err);
          });
      return res;
    };
  </code></pre>