Think of the following React component:

const [page, setPage] = useState(1)
const [search, setSearch] = useState("")

const [data, setData] = useState([])

const fetchData = useCallback(() => {
    get({page: page, search: search}.then(setData)
}, [page, search])

useEffect(() => {
    fetchData()
}, [page]) // <----- here I got the react-hooks/exhaustive-deps lint error

// if I add `fetchData` above, `fetchData` will be called whenever `search` change,
// but I only want to fetch data when `page` change.

return <div>
    <Input value={search} setValue={setSearch}/>

    <Button onClick={() => fetchData()}>Search</Button>

    {data.maps(v => <div>{v}</div>}

    <Select value={page} setValue={setPage}/>
</div>

The goal is really simple:

• fetch data when page change;
• do not fetch data when search change;
• fetch data when the button is clicked;

I really cannot think of any other way to bypass the eslint rule. Thanks for any help.