calling the Redux-Thunk Action after Component Mount by using useEffect. but got issue : React Hook useEffect has missing dependencies

0
votes

I need to call the API after component Mount. but I am using Function Component. by that reason, I am using the useEffect hook like the following.

function ReportPage({ getAlertAuditLogs, getSensors, getUsers }) {
  
  ...
  
  useEffect(() => {
    getAlertAuditLogs()
    getSensors()
    getUsers()
  }, [])
  
  ...
  
}

but I got the notification :

React Hook useEffect has missing dependencies: 'getAlertAuditLogs', 'getSensors', and 'getUsers'. Either include them or remove the dependency array. If 'getAlertAuditLogs' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps

the 3 apis don't have any param. How can I fix this issue?

PS : getAlertAuditLogs is the redux actions like the following

import { reportConstants } from "../_constants"
import { alertAuditLogsService } from "../_services"

export const reportActions = {
  getAlertAuditLogs
}

function getAlertAuditLogs() {
  return (dispatch) => {
    dispatch(request())

    alertAuditLogsService.getAlertAuditLogs().then(
      (alertAuditLogs) => dispatch(success(alertAuditLogs.docs)),
      (error) => dispatch(failure(error.toString()))
    )
  }

  function request() {
    return { type: reportConstants.GET_ALERT_AUDIT_LOGS_ALL_REQUEST }
  }
  function success(alertAuditLogs) {
    return { type: reportConstants.GET_ALERT_AUDIT_LOGS_ALL_SUCCESS, alertAuditLogs }
  }
  function failure(error) {
    return { type: reportConstants.GET_ALERT_AUDIT_LOGS_ALL_FAILURE, error }
  }
}
1
javascriptreactjsreact-reduxredux-thunk

1 Answers

1
votes

the compiller suggest - that the calls of function should be in useEffect arguments:

For improve efficiency (similar to caching) - just wrap useCallback() to those every 3 functions:

This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders

const getAlertAuditLogs = useCallback(
  () => {
    your function
  },
  [(here params from your functions - but you said there is paramteless)],
);


function ReportPage({ getAlertAuditLogs, getSensors, getUsers }) {
  
  ...
  
  useEffect(() => {
    getAlertAuditLogs()
    getSensors()
    getUsers()
  }, [getAlertAuditLogs, getSensors, getUsers ])
  
  ...
  
}