reactjs - ¿Por qué useEffect advierte sobre los campos que no necesito poner en el arreglo de dependencias?

He revisado la documentación de useEffect y no entiendo por qué recibo una advertencia por cada variable y función que uso dentro de useEffect, aunque no dependa de ellas.

Considera mi useEffect aquí

const [updatedComm, setUpdatedComm] = useState<ICommunication>(props.comm)
const [isEditOn, setIsEditOn] = useState<boolean | false>(false)
const getPublishedComm = () => { /* function implementation */ }
const dispatch = useDispatch();

useEffect(() => {
        if (!isEditOn && updatedComm !== props.comm) {
            const publishedComm = getPublishedComm()
            dispatch(editCommunication(publishedComm))
            setCurrentComm(publishedComm)
        }
    }, [isEditOn])

Mi única necesidad de ejecutar este efecto es cuando isEditOn cambia. Sin embargo, este código registra advertencias

  Line 66:8:  React Hook useEffect has missing dependencies: 'dispatch', 'getPublishedComm', 'props.comm', and 'updatedComm'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

¿Qué puedo hacer para eliminar estas advertencias, o realmente me está faltando algo fundamental?

Por favor, ayúdame a entender.

Gracias

Respuesta #1

Haz esto para "silenciar" esa advertencia,
especialmente si estás seguro de que la re-renderización debería/shall/está basada en dependencias específicas

useEffect(() => {
   if (!isEditOn && updatedComm !== props.comm) {
      const publishedComm = getPublishedComm();
      dispatch(editCommunication(publishedComm));
      setCurrentComm(publishedComm);
   }
   // eslint-disable-next-line
}, [isEditOn])

Pero por lo que veo, incluso updatedComm debería ser parte de ese array de dependencias.
Vale la pena entender la esencia del array de dependencias en cuanto a la optimización del rendimiento al omitir efectos.

Respuesta #2

Debido a que useEffect ve tu uso de estados y de setters de estado, le preocupa que tengas muchas cosas que cambian dentro del callback, pero estés usando pocas dependencias.

Porque en el componente funcional, la función del manejador también cambia en el nuevo renderizado

Lo que podrías hacer es - extraer el cuerpo del efecto para evitar la advertencia

Pero está fuertemente desaconsejado: si sientes que estás haciendo algo mal, probablemente sea cierto, vuelve a leer la documentación

function editChanged (isEditOn) { // only isEditOn guaranteed to be fresh
   if (!isEditOn && updatedComm !== props.comm) {
      const publishedComm = getPublishedComm();
      dispatch(editCommunication(publishedComm));
      setCurrentComm(publishedComm);
   }
}

useEffect(() => {
   editChanged(isEditOn)
}, [isEditOn])