Даже при пустом массиве зависимостей useEffect, запросы шлются без перерывов, что может быть причиной ререндеринга?

Question

[attachedsoul148]

import style from "./Users.module.css"
import React, { useEffect } from "react"
import User from "./SingleUser/User"
import Paginator from "../common/Paginator/Paginator"
import UserSearchForm, { FilterType } from "./UserSearchForm"
import { useDispatch, useSelector } from "react-redux"
import {
  getCurrentPageSelector,
  getFilterSelector,
  getFollowingInProgressSelector,
  getPageSizeSelector,
  getTotalUsersCountSelector,
  getUsersSelector,
} from "../../redux/selectors/userSelectors"
import { followTC, getUsersTC, unFollowTC } from "../../redux/usersReducer"

const Users: React.FC = (props) => {
  useEffect(() => {
    dispatch(getUsersTC(pageSize, currentPage, filter))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])

  const currentPage = useSelector(getCurrentPageSelector)
  const pageSize = useSelector(getPageSizeSelector)
  const filter = useSelector(getFilterSelector)
  const totalUsersCount = useSelector(getTotalUsersCountSelector)
  const users = useSelector(getUsersSelector)
  const followingInProgress = useSelector(getFollowingInProgressSelector)

  const dispatch = useDispatch()

  const updateUsers = (pageNumber: number) => {
    dispatch(getUsersTC(pageSize, pageNumber, filter))
  }
  const updateFilter = (filter: FilterType) => {
    dispatch(getUsersTC(pageSize, 1, filter))
  }
  const followThunk = (userId: number) => {
    dispatch(followTC(userId))
  }
  const unFollowThunk = (userId: number) => {
    dispatch(unFollowTC(userId))
  }

  return (
    <div className={style.usersContainer}>
      <div>
        <h2>Users</h2>
      </div>
      <UserSearchForm updateFilter={updateFilter} />
      <Paginator
        totalUsersCount={totalUsersCount}
        pageSize={pageSize}
        currentPage={currentPage}
        updateUsers={updateUsers}
      />
      <div className={style.usersInfo}>
        {users.map((u) => (
          <User
            followThunk={followThunk}
            unFollowThunk={unFollowThunk}
            followingInProgress={followingInProgress}
            user={u}
            key={u.id}
          />
        ))}
      </div>
    </div>
  )
}

export default Users

Comments

[V Sh.]

А где компонент Users используется? Скорее всего проблему ререндеринга надо искать там.

[attachedsoul148]

V Sh.,

import { useSelector } from "react-redux"
import Users from "./Users"
import React from "react"
import Preloader from "../common/Preloader/Preloader"
import { getIsFetchingSelector } from "../../redux/selectors/userSelectors"

export const UsersPage: React.FC = (props) => {
  const isFetching = useSelector(getIsFetchingSelector)
  return <>{isFetching ? <Preloader /> : <Users />}</>
}

[Gary_Ihar]

Так вот же и ответ. Когда происходит isFetching, компонента с юзерами размонтируется. Фетчинг закончился, компонента вмонтировалась и useEffect внутри снова отработал, все работает так, как вы описали