Реагировать - функциональные компоненты продолжают повторную визуализацию при передаче функций в качестве реквизита

Question

У меня есть проблема в моем приложении реакции, и я не знаю, как ее решить;

У меня есть массив со значениями и выбранным списком, а также функция для добавления элемента в выбранный список

import React, { useState } from "react";
import Parent from "./Parent";
export default function App() {
  const [chosenList, setChosenList] = useState([]);
  const array = ["dsadas", "dasdas", "dasdasd"];

  const addToChosenList = string => {
    setChosenList([...chosenList, string]);
  };

  return (
    <div className="App">
      <Parent
        arr={array}
        chosenList={chosenList}
        addToChosenList={addToChosenList}
      />
    </div>
  );
}

Родительский компонент, который отображает массив и дает вложенному компоненту реквизиты: item, addToChosenList, inList

import React from "react";
import Nested from "./Nested.js";

export default function Parent({ arr, addToChosenList, chosenList }) {
  return (
    <div className="App">
      {arr.map((item, index) => (
        <Nested
          key={index}
          item={item}
          addToChosenList={addToChosenList}
          inList={chosenList.findIndex(listitem => listitem === item) > -1}
        />
      ))}
    </div>
  );
}

Вложенный компонент, который отображает элемент и дает ему функцию addToChosenList для добавления элемента в выбранный список

import React, { memo } from "react";
export default memo(function Parent({ item, addToChosenList, inList }) {
  const childFunctionToAddToChosenList = () => {
    addToChosenList(item);
  };
  return (
    <div className="App" onClick={childFunctionToAddToChosenList}>
      <div>{item}</div>
      {inList && <div>in List</div>}
    </div>
  );
});

каждый вложенный компонент продолжает повторную визуализацию после того, как я щелкнул только один элемент в списке, и я считаю, что он отображается из-за функции addToChosenList, которая изменяется при изменении состояния

кто-нибудь знает как это решить ??

спасибо:)

Answer 1

addToChosenList будет указывать на новую ссылку при каждом повторном рендеринге, обернуть ее в useCallback , которая будет сохранять ту же ссылку при повторном рендеринге, если только одна из переменных внутри массива зависимостей не изменилась Если мы передадим пустой массив, функция сохранит одну и ту же ссылку на протяжении всего жизненного цикла компонента.

вам также потребуется использовать функциональное обновление, чтобы избежать устаревшего состояния из-за закрытия

const addToChosenList = useCallback(string => {
  setChosenList(prevState => [...prevState, string]);
}, []);