如何在 React useEffect 中防止不必要的 API 調用？

Question

我的HomeScreen組件包含一個 API 調用來獲取當前用戶。 有沒有辦法讓它僅在用戶更改時進行 API 調用。 到目前為止，如果我離開屏幕然后回來，它會進行 API 調用並顯示加載程序，我認為這不是完美的用戶體驗，更不用說 API 請求是完全多余的，因為用戶沒有改變。

useEffect(() => {
    dispatch(userRequest({ userId, userRole }))
}, [dispatch, userId, userRole]) 

我還試圖用reselect ，以獲得userId和userRole從Redux和包裝我的HomeScreen中的組件React.memo但似乎得到重新呈現每一次

這是我從Redux獲取數據的方法

const userId = useSelector(selectUserId)
const userRole = useSelector(selectUserRole)

我的選擇器：

const loginInfoSelector = (state: AppStateType) => state.loginInfo

export const selectUserId = createSelector(
  loginInfoSelector,
  (loginInfo) => loginInfo.id
)
export const selectUserRole = createSelector(
  loginInfoSelector,
  (loginInfo) => loginInfo.role
)

Answer 1

我會嘗試從依賴數組中刪除dispatch為：

useEffect(() => {
   dispatch(userRequest({ userId, userRole }))
}, [userId, userRole])

這樣它只會在userId或userRole發生變化時觸發。