Beginner's Thread / Easy Questions (October 2019)

Apparently I should not use https://www.npmjs.com/package/eslint-plugin-react-hooks because my app used CRA. Will anything bad actually happen if I just go ahead and install it? I ask because I'm trying to hunt down where I've broken the rules of hooks, and I'm going crazy doing it.

If anyone is interested, the console error leads me to this file. But I see nothing wrong with it.

import { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { IncidentService } from '@domain/services';
import { INCIDENT_FETCHED, INCIDENT_UPDATED } from '@domain/action-types';

const useIncident = () => {
  const dispatch = useDispatch();
  const incidentLoading = useRef(false);
  const incidentUpdating = useRef(false);
  const incidentFetched = useSelector(state => state.incidentFetched);
  const incident = useSelector(state => state.incident);
  const authenticated = useSelector(state => state.authenticated);

  useEffect(() => {
    if (authenticated && !incidentLoading.current && !incidentFetched) {
      const fetchIncident = async () => {
        const incident = await IncidentService.get();
        dispatch({ type: INCIDENT_FETCHED, incident });
    };

    incidentLoading.current = true;
    fetchIncident();
  }
}, [incidentLoading, incidentFetched, incident]);

useEffect(() => {
  if (incidentFetched) {
    incidentLoading.current = false;
  }
}, [incidentFetched, incidentLoading]);

const updateIncident = async newDetails => {
  incidentUpdating.current = true;
  const updatedIncident = await IncidentService.save({
    ...incident,
    ...newDetails
  });

  dispatch({
    type: INCIDENT_UPDATED,
    incident: updatedIncident
  });
  incidentUpdating.current = false;
};

return updateIncident;

};

export default useIncident();

Because this is the file the error leads me too. But I see nothing wrong with it.

/r/reactjs Thread