Mutation to tackle state update race conditions. Good or bad idea?

Hello. I want to update state with some async result and wondering if this approach is good?

If

updateConfig

updateConfig

updateConfig

updateConfig called multiple times race condition can happen.

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        let config = mapAdjustableConffigToFinalConfig(adjustableConfig, finalConfig);
        if (checkIsDifferent(config.importantOptions, finalConfig.importantOptions)) {
            config = await buildFinalConfig(config);
        }
        setFinalConfig(finalConfig);
    };

    return { finalConfig, updateConfig };
};

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        let config = mapAdjustableConffigToFinalConfig(adjustableConfig, finalConfig);
        if (checkIsDifferent(config.importantOptions, finalConfig.importantOptions)) {
            config = await buildFinalConfig(config);
        }
        setFinalConfig(finalConfig);
    };

    return { finalConfig, updateConfig };
};

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        let config = mapAdjustableConffigToFinalConfig(adjustableConfig, finalConfig);
        if (checkIsDifferent(config.importantOptions, finalConfig.importantOptions)) {
            config = await buildFinalConfig(config);
        }
        setFinalConfig(finalConfig);
    };

    return { finalConfig, updateConfig };
};

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        let config = mapAdjustableConffigToFinalConfig(adjustableConfig, finalConfig);
        if (checkIsDifferent(config.importantOptions, finalConfig.importantOptions)) {
            config = await buildFinalConfig(config);
        }
        setFinalConfig(finalConfig);
    };

    return { finalConfig, updateConfig };
};

I decided to

useMutation

useMutation

useMutation

useMutation, because it has one special feature - you can use

onSuccess

onSuccess

option in

mutation.mutate

mutation.mutate

mutation.mutate

mutation.mutate method to ensure than only last called mutation

onSuccess

onSuccess

will be called as per documentation, so I can set state in this success call.

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const finalConfigMutation = useMutation({
        mutationFn: async ({
            adjustableConfig,
            currentConfig,
        }: {
            currentConfig: FinalConfig;
            adjustableConfig: AdjustableConfig;
        }) => {
            let config = mapAdjustableConffigToFinalConfig(adjustableConfig, currentConfig);
            if (checkIsDifferent(config.importantOptions, currentConfig.importantOptions)) {
                config = await buildFinalConfig(config);
            }
            return config;
        },
    });

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        finalConfigMutation.mutate(
            { currentConfig: finalConfig, adjustableConfig },
            { onSuccess: config => setFinalConfig(config) },
        );
    };

    return { finalConfig, updateConfig };

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const finalConfigMutation = useMutation({
        mutationFn: async ({
            adjustableConfig,
            currentConfig,
        }: {
            currentConfig: FinalConfig;
            adjustableConfig: AdjustableConfig;
        }) => {
            let config = mapAdjustableConffigToFinalConfig(adjustableConfig, currentConfig);
            if (checkIsDifferent(config.importantOptions, currentConfig.importantOptions)) {
                config = await buildFinalConfig(config);
            }
            return config;
        },
    });

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        finalConfigMutation.mutate(
            { currentConfig: finalConfig, adjustableConfig },
            { onSuccess: config => setFinalConfig(config) },
        );
    };

    return { finalConfig, updateConfig };

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const finalConfigMutation = useMutation({
        mutationFn: async ({
            adjustableConfig,
            currentConfig,
        }: {
            currentConfig: FinalConfig;
            adjustableConfig: AdjustableConfig;
        }) => {
            let config = mapAdjustableConffigToFinalConfig(adjustableConfig, currentConfig);
            if (checkIsDifferent(config.importantOptions, currentConfig.importantOptions)) {
                config = await buildFinalConfig(config);
            }
            return config;
        },
    });

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        finalConfigMutation.mutate(
            { currentConfig: finalConfig, adjustableConfig },
            { onSuccess: config => setFinalConfig(config) },
        );
    };

    return { finalConfig, updateConfig };

const useFinalConfig = (initialConfig: FinalConfig) => {
    const [finalConfig, setFinalConfig] = useState(initialConfig);

    const finalConfigMutation = useMutation({
        mutationFn: async ({
            adjustableConfig,
            currentConfig,
        }: {
            currentConfig: FinalConfig;
            adjustableConfig: AdjustableConfig;
        }) => {
            let config = mapAdjustableConffigToFinalConfig(adjustableConfig, currentConfig);
            if (checkIsDifferent(config.importantOptions, currentConfig.importantOptions)) {
                config = await buildFinalConfig(config);
            }
            return config;
        },
    });

    const updateConfig = async (adjustableConfig: AdjustableConfig) => {
        finalConfigMutation.mutate(
            { currentConfig: finalConfig, adjustableConfig },
            { onSuccess: config => setFinalConfig(config) },
        );
    };

    return { finalConfig, updateConfig };

Is this something mutation can be used for?

Mutation to tackle state update race conditions. Good or bad idea?

Similar Threads

Similar Threads

Similar Threads