title: Refactoring a class based component to a Functional component
body: <p>TL;DR : I am trying to refactor my class-based App component to a Functional component and I am having some unexpected results with the useEffect Hook.</p>
  
  <p>I am fairly new to React and the version of my app to search for movies with the OMDB API was a class based one. It was working well so I wanted to practice some more on working with hooks and context before venturing into redux.</p>
  
  <p>In my class component I had the following code: </p>
  
  <pre><code>componentDidMount = () =&gt; {
      window.onscroll = this.handleScroll;
    };
  
    handleScroll = () =&gt; {
      if (!this.state.movies.loading) {
        if (getScrollDownPercentage(window) &gt; 0.8) {
          const nextPage = this.state.movies.page + 1;
          this.searchMovies(this.state.movies.searchValue, nextPage);
          this.setState({
            ...this.state,
            movies: {
              ...this.state.movies,
              page: nextPage,
            },
          });
        }
      }
    };
  
    searchMovies = (str, page = 1) =&gt; {
      const existingMovies =
        this.state.movies.data.length &amp;&amp; this.state.movies.searchValue === str
          ? this.state.movies.data
          : [];
      this.setState({
        ...this.state,
        movies: {
          ...this.state.movies,
          loading: true,
        },
      });
      axios
        .get(`${process.env.REACT_APP_ENDPOINT}s=${str}&amp;page=${page}`)
        .then((response) =&gt; {
          if (response.data.Response === "True") {
            this.setState({
              ...this.state,
              movies: {
                ...this.state.movies,
                loading: false,
                searchValue: str,
                data: [...existingMovies, ...response.data.Search],
              },
            });
          }
        });
    };
  </code></pre>
  
  <p>After the refactor I have following code which feels less clean (so the opposite of what I was hoping to achieve) </p>
  
  <p><strong>The moment I reach the end of the page I get a non-stop stream of axios calls switching between page 2 and 3</strong> </p>
  
  <p>If I'm not wrong it's not working because setState is running asynchronously and I am getting constant updates on my page.</p>
  
  <pre><code>  useEffect(() =&gt; {
      window.onscroll = () =&gt; {
        handleScroll();
      };
      if (searchValue) {
        console.log(page);
        searchMovies(searchValue, page);
      }
      return () =&gt; {
        window.removeEventListener("scroll", handleScroll);
      };
    }, [searchValue, page]);
  
    const handleScroll = () =&gt; {
      if (!loading &amp;&amp; searchValue) {
        if (getScrollDownPercentage(window) &gt; 0.7) {
          setState({
            ...state,
            movies: {
              ...state.movies,
              page: page + 1,
            },
          });
        }
      }
    };
  
    const searchMovies = (str, page = 1) =&gt; {
      const existingMovies = data.length &amp;&amp; prevSearchValue === str ? data : [];
      setState({
        ...state,
        movies: {
          ...state.movies,
          loading: true,
        },
      });
      axios
        .get(`${process.env.REACT_APP_ENDPOINT2}s=${str}&amp;page=${page}`)
        .then((response) =&gt; {
          if (response.data.Response === "True") {
            setState({
              ...state,
              movies: {
                ...state.movies,
                loading: false,
                searchValue: str,
                data: [...existingMovies, ...response.data.Search],
              },
            });
          } else {
            setState({
              ...state,
              movies: {
                ...state.movies,
                loading: false,
                error: true,
              },
            });
          }
        });
    };
  </code></pre>
  
  <p>I hope I included everything (and also not too much) to make my clear my problem. Looking out for some React wizards.</p>
  
  <p>Edit: specified problem a little bit more and put it in bold</p>