несколько пользовательских хуков реагирования в одном компоненте

Question

Является ли приемлемой практика иметь два настраиваемых обработчика реакции в одном и том же компоненте, один за другим?

Проблема, с которой я имею дело, заключается в следующем:

Первый настраиваемый обработчик useBudgetItems будет загружено, но последующее будет неопределенным. Я думаю, что понимаю, почему это происходит (мое свойство budgetSettings внутри моего useBudgetSettings загружается после оператора console.log ()), но я не уверен, как обойти это и является ли это правильным подходом.

const BudgetCost ({ projectId }) => {

   const { budgetCost, loaded } = useBudgetCost({ key: projectId });
   const { budgetSettings } = useBudgetSettings({ key: projectId });

   const [totalBudget, setTotalBudget] = useState(budgetCost.totalBudget);
   const [budgetCosts, setbudgetCosts] = useState(budgetCost.items);

   // This will be undefined
   console.log(budgetSettings)

   if(!loaded) return <div/>

   return (
      ...
      ...
   )

});

Мой пользовательский хук useBudgetCost выглядит следующим образом (useBudgetSettings не сильно отличается в механике.

const useBudgetCost = ({ key, notifyOnChange }) => {

    const [loaded, setIsLoaded] = useState(false)
    const { budgetCost, setBudgetCost } = useContext(ProjectContext)

    useEffect(() => {
        if(key)
            return getBudgetCost(key);
    },[key]);

    const getBudgetCost = (key) => {
        let { budgetCosts, loaded } = UseBudgetCostsQuery(key);
        setBudgetCost(budgetCosts);
        setIsLoaded(loaded);
    }

    let onBudgetCostChange = (update) => {
        let tempBudgetCostItems = copyArrayReference(budgetCost);

        tempBudgetCostItems = {
            ...tempBudgetCostItems,
            ...update
        }

        setBudgetCost(tempBudgetCostItems)

        if (notifyOnChange)
            notifyOnChange(update)
    }

    return {
        loaded,
        budgetCost,
        onBudgetCostChange
    }
}

useBudgetSettings компонент:

const useBudgetSetting = ({ key }) => {

    const [loaded, setIsLoaded] = useState(false)
    const { budgetSettings, setBudgetSettings } = useContext(ProjectCondext)
    const globalContext = useContext(GlobalReferenceContext);

    useEffect(() => {
        if(key)
            return getBudgetSetting(key);
    },[key]);

    const getBudgetSetting = (key) => {
        let { budgetSettings, loaded } = UseBudgetSettingsQuery(key);
        console.log(budgetSettings);
        setBudgetSettings(budgetSettings);
        setIsLoaded(loaded);
    }

    const getBudgetReferences = (overrideWithGlobal = false) => {
        if(overrideWithGlobal)
            return globalContext.getBudgetReferences();
        return budgetSettings.map((item) => { return { value: item.key, label: item.costCode } });
    }

    const getCategoryText = (key) => _.get(_.find(getBudgetReferences(), (bc) => bc.value === key), 'label');

    return {
        loaded,
        budgetSettings,
        getCategoryText,
        getBudgetReferences
    }
}