Проблема перерендера

Question

Когда ввожу текст в инпут - должна срабатывать фильтрация. Она срабатывает нормально.

const SearchInput = ({ t, dropdownData, setSearchListData }) => {
  const [enteredText, setEnteredText] = useState('');

  useEffect(() => {
    if (!enteredText) {
      console.log('enteredText false----------------');
      setSearchListData(dropdownData);
    }
    if (enteredText) {
      console.log('enteredText true---------');
      console.log('enteredText', enteredText);
      const newList = dropdownData.filter(item => isTextExistsInItem({ enteredText, item }));
      console.log('newList', newList);
      // setSearchListData(newList);
    }
  }, [enteredText]);
  
  const handleChange = ({ target }) => {
    const { value } = target;
    setEnteredText(value);
  };

  return (
    <input
      className="search-input"
      onChange={handleChange}
      type="text"
      placeholder={t('searchModal.placeholder')}
      value={enteredText}
    />
  );
};

export default SearchInput;

Когда делаю setState ( setSearchListData(newList) - этот метод передаю в этот компонент из родительского компонента ), срабатывает перерендер всего компонента Modal, а не отдельного списка. И input сбрасывается на начальное значение. Список не сортирует.

Часть родительского компонента и компонент списка:

const SearchItemsList = ({ searchListData }) =>
  searchListData
    ? searchListData.map((itemData, idx) => <SearchItem key={idx} itemData={itemData} />)
    : null;

const SearchModal = ({ dropdownData, title, withPortal, closeModal }) => {
  const { t } = useTranslation('translation');
  const { isTargetDevice } = useTargetDevice();
  const [searchListData, setSearchListData] = useState(dropdownData);

  console.log('searchListData', searchListData);
  const SearchListSection = () => (
    <div
      className={classNames('search-modal__items-section', {
        'common-scroll': !isTargetDevice
      })}
    >
      <ScrollableArea styles={{ maxHeight: '49rem' }}>
        <SearchItemsList searchListData={searchListData} />
      </ScrollableArea>
    </div>
  );

  const ModalSearch = () => (
    <div className="search-modal__search">
      <div className="icon-container">
        <SearchLoopIcon className="search-loop-icon" />
      </div>
      <SearchInput t={t} setSearchListData={setSearchListData} dropdownData={dropdownData} />
    </div>
  );

БЛОГ НА HUSL

Проблема перерендера

Ответы (0 шт):