Почему требует установить в зависимость 'dispatch'?

Question

[justifycontent]

Выдает варнинг в консоль: Line 14:6: React Hook React.useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps. Зачем меня просят установить dispatch в зависимость useEffect?

import * as React from 'react'
import css from './List.module.css';
import Note from '../Note/Note'
import { useDispatch, useSelector } from 'react-redux'
import { setTotal } from '../../Redux/actions/note'


export const List = () => {
  const notes = useSelector(({ note }) => note.items)
  const dispatch = useDispatch()

  React.useEffect(() => {
    dispatch(setTotal(notes.length))
  }, [notes])

  return (
    <>
      <ul className={css.list}>
        {notes && notes.map((note, i) => <Note i={i} key={`key_${i}`} text={note}/>)}
      </ul>
    </>
  )
}

export default List;

Answer 1

[Сергей Сунцев]

Потому, что вы используете этот метод внутри useEffect.
Добавьте метод к зависимостям

React.useEffect(() => {
    dispatch(setTotal(notes.length))
  }, [notes, dispatch])

Comments

[justifycontent]

Спасибо большое за ответ. Т.е. если я использую какой-либо метод в теле useEffect, то я должен обязательно добавить этот метод в зависимость? Можно подробнее на этом моменте?

[justifycontent]

То что добавить dispatch в зависимости надо, это я понял? Но не понял зачем

[Сергей Сунцев]

Потому, что линтер думает, что ваш dispatch может изменится, если вдруг функциональный компонент меняется и вам не надо по нему делать эффект, то можно просто отключить это правило через
/* eslint-disable react-hooks/exhaustive-deps */

Но в вашем случае dispatch меняться не будет, поэтому просто добавьте в deps.

На самом деле я считаю это побочным эффектом от следующей проверки, которая описана тут -> https://reactjs.org/docs/hooks-faq.html#is-it-safe...

[justifycontent]

Сергей Сунцев, Спасибо большое