issue with persisted parameter in mobx reaction

[vertic4l]

Hi,

i struggle with the following. Given a react hook which receives a new formConfig on page switch and determines which form elements are getting displayed.

import { IReactionDisposer, reaction } from "mobx";
import { useEffect, useRef, useState } from "react";
import { IForm, TFormElement } from "common/interfaces/IForm";
import { useDependencies } from "dependencies/UseDependencies";
import getFormElements from "organisms/FormBuilder/utils/Getter/GetFormElements";
import { TFormElementIdentifier } from "strecken/common/types/TFormElementIdentifier";
import { TFormIdentifier } from "strecken/common/types/TFormIdentifier";

const useCurrentFormElements = <
    FormIdentifier extends TFormIdentifier,
    FormElementIdentifier extends TFormElementIdentifier
>(
    formConfig: IForm<FormIdentifier, FormElementIdentifier>
) => {
    const dependencies = useDependencies();
    const [formElements, setFormElements] = useState<
        Array<TFormElement<FormElementIdentifier>>
    >([]);

    const config = useRef(formConfig);
    const disposer = useRef<IReactionDisposer | null>(null);

    const fetchFormElements = async (
        config: IForm<FormIdentifier, FormElementIdentifier>
    ) => {
        const formElements = await getFormElements(
            config.formFieldsets,
            dependencies.stores,
            dependencies.services,
            config
        );

        console.log(config);

        setFormElements(formElements);
    };

    useEffect(() => {
        console.log(formConfig);

        if (disposer.current) {
            disposer.current();
        }

        config.current = formConfig;

        disposer.current = reaction(
            () => dependencies.stores.formDataStore.formData,
            () => fetchFormElements(config.current)
        );
    }, [formConfig]);

    return { formElements, disposer: disposer.current };
};

export default useCurrentFormElements;

The reaction always returns outdated values and uses a previous value of formConfig.

Where does this persistence come from ?

[urugator]

Reaction doesn't wait for the effect to run. Once dependencies.stores.formDataStore.formData changes, fetchFormElements(config.current) is immediately invoked, before any render+effect had a chance to run and update config.formConfig. Either make everything observable and move it to the reaction (and ideally keep reaction outside component as part of some store), or remove the reaction and move the dependencies.stores.formDataStore.formData to the effect's depedencies. Or don't do this reactively in effect/reaction, but call fetchFormElements(config.current) directly as part of an action that modifies formData/formConfig.
Genereally try to avoid combining immutables state/props with mutable observables as they're updated at different moments and they don't play well together.