Tengo varias setState(newState, callback) en mi componente Class. Ahora que estoy cambiando a usar ganchos, no puedo poner todas las devoluciones de llamada en un useEffect y llamarlas condicionalmente.

Algunas llamadas a setState no se distinguen con respecto a los cambios que están realizando (pueden estar cambiando la misma matriz almacenada en useState ), pero todas activan devoluciones de llamada muy diferentes. No puedo simplemente poner diferentes condiciones en useState y disparar devoluciones de llamada.

Toda la lógica se está volviendo mucho más compleja. ¿Cómo ha manejado cambiar setState a useState sin afectar las devoluciones de llamada o tener que hacer cambios lógicos muy complejos dentro useEffect ?

Código de ejemplo:

 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() ); };