Реагировать - useMemo имеет сложное выражение - Извлечь его в отдельную переменную, чтобы его можно было статически проверить

Question

Я пытаюсь использовать useMemo, но я получил сообщение от lint:

React Hook useMemo имеет сложное выражение в массиве зависимостей. Извлеките его в отдельную переменную, чтобы он мог быть статически проверен реагирующими крючками / исчерпывающими задержками.

Что бы это могло быть?

const [selectedDate, setSelectedDate] = useState("Escolha uma data para pagamento");
const itens = useMemo(() => {
  if (!contrato.propostas || contrato.propostas.length == 0) return [];
  let dates = contrato.propostas.map(p => p.vencimento)
  dates = Array.from(new Set(dates)).map((item) => ({
    id: item,
    option: item
  }))
  if (dates.length === 1 && selectedDate !== contrato.filterByDate) setSelectedDate(dates[0].option)
  if (contrato.filterByDate && dates.find(d => d.id === contrato.filterByDate) !== -1) setSelectedDate(contrato.filterByDate);
  return dates;
}, [JSON.stringify(contrato.propostas), contrato.filterByDate, selectedDate])

contrato и contrato.propostas являются объектами.
contrato.filterByDate - это строка.
Я пытался найти открытый вопрос, но не смог его найти.

Answer 1

Это говорит вам сделать это:

const [selectedDate, setSelectedDate] = useState("Escolha uma data para pagamento");
const temp = JSON.stringify(contrato.propostas);
const itens = useMemo(() => {
 // ...
}, [temp, contrato.filterByDate, selectedDate])

Но я не понимаю, почему вы стреляете contrato.propostas. Вы никогда не используете строковую версию, так что на самом деле это не зависимость. И до тех пор, пока вы сохраняете свои данные неизменными (как вы должны реагировать), вам просто нужно поместить contrato.propostas непосредственно в массив зависимостей:

const [selectedDate, setSelectedDate] = useState("Escolha uma data para pagamento");
const itens = useMemo(() => {
 // ...
}, [contrato.propostas, contrato.filterByDate, selectedDate])