How to set multiple useEffect hooks in Reactjs to prevent duplication of queries

Question

I wonder if how to set multiple useEffect hooks in Reactjs to prevent duplication of queries.

I have DocumentList which gets string variable "query" from parent and variable "page". First is used to get document list from remote api. Second one - to set pagination value. These variables aree used in fetch query.

Please, look at the code:

import React, { useState, useEffect } from "react"
import axios from 'axios'
import { Link, useLocation } from "react-router-dom";

export default function DocumentList({query}) {

  const [page, setPage] = useState(1);

  useEffect( () => {
    results();
  }, [query, page])

    let ajaxRequest = null; 

    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [items, setItems] = useState([]);

    const dataUrl = 'https://api/test';

    const results = () => {

       ...

    }

    
    function List() {
      ...
    }

    const handlePrevPage = () => {
      if (page > 1) {
        setPage(page - 1);
      }
    }

    const handleNextPage = () => {
      setPage(page + 1);
    }

    function Pagination() {

      return (
        
            <button onClick={handlePrevPage}>
              Prev
            </button>
            <span className="block py-1 px-2 font-bold text-white">{page}</span>
            <button onClick={handleNextPage} >
              Next
            </button>
            
          </div>
        </div>
      );
    }





    ...

}

And the question is how to combine these variables setting to prevent duplication of request?

If i set only one of them - or "query", or "page" all working good. But how can I reset "page" for new query?

Thanks!

Answer 1

You can use 2 useEffects like below

  const handleNextPage = () => {
      setPage(page + 1);
      setTrigger(prev => !prev)
    }
  const [trigger, setTrigger] = useState(false);
  useEffect( () => {
    setPage(1)
    setTrigger(prev => !prev)
  }, [query])

  useEffect( () => {
    results();
  }, [trigger])

Please note trigger ensures triggering results when a new query passed while the page state is already 1