Share a piece of Redux state with custom functions only when its value has become stable

Question

We have an add-in built with ReactJS, redux, and redux-saga. Now, we are adding custom functions to the add-in. In our manifest, we have the following setting, where Functions.Taskpane.Url points to a webpage ourdomain.com/#/functions.

<ExtensionPoint xsi:type="CustomFunctions">
    <Script>
    <SourceLocation resid="Functions.Script.Url"/>
    </Script>
    <Page>
    <SourceLocation resid="Functions.Taskpane.Url"/>
    </Page>
    <Metadata>
    <SourceLocation resid="Functions.Metadata.Url"/>
    </Metadata>
    <Namespace resid="Functions.Namespace"/>
</ExtensionPoint>

The page ourdomain.com/#/functions is built with ReactJS and Redux. It's like

declare var OfficeRuntime;

interface FunctionsStartProps {
  settings: any
}

const FunctionsStart: React.FunctionComponent<FunctionsStartProps> = ({ settings }) => {

  useEffect(() => {
    OfficeRuntime.storage.setItem("shared-settings", JSON.stringify(settings))
      .then(() => { console.log("settings updated in OfficeRuntime.storage by FunctionsStart") })
      .catch((error) => { console.error("Error updating settings in OfficeRuntime.storage by FunctionsStart:", error) });
  }, [settings]);

  return (<div></div>)
}

export default withTranslation()(connect((state: ReduxState) => ({
  settings: selectors.settings.getSettings(state)
}))(FunctionsStart));

Inside a custom function f, we use OfficeRuntime.storage.getItem("shared-settings") to get the value of settings.

When the component FunctionsStart is loaded, settings in the Redux store first has initialValue, then it quickly changes to stableValue. Our tests show that the first time we run the function f (which triggers the loading of FunctionsStart), the value of settings is initialValue; the second (and following) time we run the function f, the value of settings is stableValue.

However, what we would like to achieve is that inside the function f, we always get stableValue, even from the first time of the execution. We would like to run the body of the function f only after the properties of FunctionsStart has become stable.

Does anyone know how to achieve that?