How to implement setState callback patten with useState

Question

I have multiple setState(newState, callback) statements in my Class component. Now that I'm shifting to using hooks, I am unable to put all of the callbacks in a useEffect and call them conditionally.

Some setState calls are not distinguishable with regard to what changes they are making (they may be changing the same array stored in the useState) but they all fire very different callbacks. I cannot simply just put different conditions in useState and fire callbacks.

The whole logic is becoming much more complex. How have you handled changing setState to useState without affecting the callbacks or having to make very complex logic changes inside useEffect?

Example code:

resetSelections = () => {
    const { filterData, toggleSidebarOnReset, toggleSidebar } = this.props;
    this.setState(
      {
        selections: getSelectionsFromFilterData(filterData),
      },
      () => {
        this.triggerAdvancedFilter();
        if (toggleSidebarOnReset && toggleSidebar) {
          toggleSidebar();
        }
        if (this.props.removeFilterDefaultSelection) {
          this.props.removeFilterDefaultSelection();
        }
      }
    );
  };

addCustomField = filterGroupData => {
    this.setState(
      prevState => ({
        customSelectionsMap: {
          ...prevState.customSelectionsMap,
          [filterGroupData.name]: filterGroupData.id,
        },
        selections: {
          ...prevState.selections,
          [filterGroupData.name]: [],
        },
      }),
      () => this.props.addCustomFieldInFilterData(filterGroupData)
    );
  };

removeCustomField = data => {
    const { selections, customSelectionsMap } = this.state;
    const newSelections = { ...selections };
    const newCustomSelectionsMap = { ...customSelectionsMap };
    delete newSelections[data.name];
    delete newCustomSelectionsMap[data.name];

    this.setState(
      {
        selections: newSelections,
        customSelectionsMap: newCustomSelectionsMap,
      },
      () => {
        this.props.removeCustomFieldFromFilterData(data);
        this.triggerAdvancedFilter();
      }
    );
  };

addToSelection = ({ group, name }, isReplace) => {
    const { selections } = this.state;
    if (R.contains(name, selections[group])) return null;
    const pushState = isReplace ? '$set' : '$push';
    this.setState(
      prevState => ({
        selections: update(prevState.selections, {
          [group]: { [pushState]: [name] },
        }),
      }),
      () => this.triggerAdvancedFilter()
    );
  };

Answer 1

You can apply your callback implementation in useEffect by giving your state variable in dependency array

You can refer to this also How to use `setState` callback on react hooks