reset callback

[eugenegordeiev]

I have a weird issue. I'm using an example of 'SUBMIT WITH RESET' from the API documentation. After resetting the form, I need to update the history state, however, if I try to do a history.replace() right after the reset, the component get re-rendered 40+ times. If I put the history.replace in timeout, it works fine.

What is the proper way to perform this action after reset() - preferably without using setTimeout and with minimal re-renders?

Below is an example:

// This causes multiple re-renders
useEffect(() => {
    if(submissionType === 'reset') {
        console.log('--RESET--')

        reset({contacts: props.location.state.profile.contacts})
        setSubmissionType(false)
	history.replace({state: {profile: props.location.state.profile}})
    }
}, [submissionType])

// This causes multiple re-renders
useEffect(() => {
    if(submissionType === 'reset') {
        console.log('--RESET--')

        reset({contacts: props.location.state.profile.contacts})
        setSubmissionType('history-update')
    }

    else if(submissionType === 'history-update') {
        console.log('--HISTORY_UPDATE--')

        setSubmissionType(false);
        history.replace({state: {profile: props.location.state.profile}})
    }
}, [submissionType])

    
// Works Fine but using setTimeout
useEffect(() => {
    if(submissionType === 'reset') {
        console.log('--RESET--')

        reset({contacts: props.location.state.profile.contacts})
        setSubmissionType(false)

        setTimeout(function(){
            history.replace({state: {profile: props.location.state.profile}})
        }, 10)
    }
}, [submissionType]);

[bluebill1049]

can you share that in a CSB?