React.js 状态仅正确更新一次，然后失败

Question

I have a parent and a child component. There are 3 props the parent provides out of which 1 is not updating correctly.

Following is the parent component. The prop in question is selectedFilters (which is an object where keys are mapped to sets ) and the relevant update function is filterChanged (this is passed to the child)

import filters from "../../data/filters";    //JSON data

const Block = (props) => {
  const [selectedFilters, setSelectedFilters] = useState({versions: new Set(), languages: new Set()});
  console.log(selectedFilters);

  const filterChanged = useCallback((filter_key, filter_id) => {
    setSelectedFilters((sf) => {
      const newSFSet = sf[filter_key]; //new Set(sf[filter_key]);
      if (newSFSet.has(filter_id)) {
        newSFSet.delete(filter_id);
      } else {
        newSFSet.add(filter_id);
      }
      const newSF = { ...sf, [filter_key]: new Set(newSFSet) };
      return newSF;
    });
  }, []);

  return (
    <FilterGroup
      filters={filters}
      selectedFilters={selectedFilters}
      onFilterClick={filterChanged}
    ></FilterGroup>
  );
};

export default Block;

The following is the child component: (Please note that while the Filter component runs the filterChanged function, I think it is irrelevant to the error)

import Filter from "./Filter/Filter";

const FilterGroup = (props) => {
  const { filters, selectedFilters, onFilterClick } = props;
  console.log(selectedFilters);

  const filter_view = (
    <Container className={styles.container}>
      {Object.keys(filters).map((filter_key) => {
        const filter_obj = filters[filter_key];
        return (
          <Filter
            key={filter_obj.id}
            filter_key={filter_key}
            filter_obj={filter_obj}
            selectedFilterSet={selectedFilters[filter_key]}
            onFilterClick={onFilterClick}
          />
        );
      })}
    </Container>
  );

  return filter_view;
};

export default FilterGroup;

When running the application, I find that the selectedFilters updates correctly only once. After that, it only changes temporarily in the main Block.tsx , but eventually goes back to the first updated value. Also, FilterGroup.tsx only receives the first update. After that, it never receives any further updated values.

Here are the logs:

After some experimentation, it is clear that the problem originates from the filterChanged function. But I cannot seem to figure out why the second update is temporary AND does not get passed on to the child.

Any ideas? Thanks in advance. (If any other info is required, pls do mention it)

Answer 1

I don't think you actually want your filterChanged function to be wrapped with useCallback , especially with an empty deps array. with the empty deps array, I believe useCallback will fire once on initial render, and memoize the result. You may be able to add filter_key and filter_id to the dependency array, but useCallback tends to actually slow simple functions down, instead of adding any real performance benefit, so you may just want to get rid of the useCallback completely and switch filterChanged to a regular arrow function.