React JS - passing multiple functions to another function

I'm trying to write a piece of parameterised code that can be called from multiple useEffect()s but cant seem to work the syntax out, so grateful for any input/suggestions.

Can anyone suggest the syntax I need to employ to deal with initialActions and finalActions, each of which are intended to be one-or-more 'setters' on useState.

  const getDataItems = ({initialActions = [], finalactions = []}) => {
    setCommonPieceOfState(true);
    ...initialActions

    doFetch(someApi())
        .then(parseResponse)
        .then(handleError)
        .then(extractData)
        .catch(errorHandler)
        .finally(() => {
        ...finalactions
          setCommonPieceOfState(false);
        })
  }

  useEffect(() => {
    if (somePieceOfState) {
      getDataItems({
        initialActions: [specificInitialActionOne(), specificInitialActionTwo()],
        finalActions: [specificFinalActionOne()]
      })    }
  }, [somePieceOfState]);

  useEffect(() => {
    if (someOtherPieceOfState) {
      getDataItems({
        initialActions: [specificInitialActionThree()],
        finalActions: [specificFinalActionTwo(), specificFinalActionThree(), specificFinalActionFour()]
      })    }
  }, [someOtherPieceOfState]);

The above pseudo code is coarse, but hopefully sufficient to convey the idea? Grateful for any thoughts/suggestions/requests for more info if the above isnt clear. I've suggested that initialActions and finalActions are arrays in the above snippet, but that needn't be the case if there's a better way

Thanks in advance,

Try these changes:

• Remove parentheses from the initialActions and finalActions array elements, as you want to pass the functions themselves, not their results.

• Use Promise.all to execute all the initial actions before starting the data fetch and all the final actions after completing the fetch.

Here the code:

const getDataItems = ({ initialActions = [], finalActions = [] }) => {
  setCommonPieceOfState(true);

  // Execute all initial actions concurrently
  Promise.all(initialActions.map((action) => action()))
    .then(() => doFetch(someApi()))
    .then(parseResponse)
    .then(handleError)
    .then(extractData)
    .catch(errorHandler)
    .finally(() => {
      // Execute all final actions concurrently
      Promise.all(finalActions.map((action) => action()))
        .finally(() => {
          setCommonPieceOfState(false);
        });
    });
};

useEffect(() => {
  if (somePieceOfState) {
    getDataItems({
      initialActions: [specificInitialActionOne, specificInitialActionTwo],
      finalActions: [specificFinalActionOne],
    });
  }
}, [somePieceOfState]);

useEffect(() => {
  if (someOtherPieceOfState) {
    getDataItems({
      initialActions: [specificInitialActionThree],
      finalActions: [
        specificFinalActionTwo,
        specificFinalActionThree,
        specificFinalActionFour,
      ],
    });
  }
}, [someOtherPieceOfState]);