Rendering multiple times?

Question

I have a form component, and the reference of input fields are linked to the useForm reducer with references. I have to set a initial form state after setting the input field references? I have done as below. But it is rendering thrice. How to solve this rendering issue?

import React, { useState } from 'react';

const useForm = () => {

    const [ formState, setFormState ] = useState({});
    const refs = useRef({});

    const register = useCallback(( fieldArgs ) => ref => {
        if(fieldArgs) {
            const { name, validations, initialValue } = fieldArgs;
    
            refs.current[name] = ref;
        }
        console.log('Register rendered');
    }, []);

    useEffect(() => {
        console.log('Effect Rendered');
        const refsKeys = Object.keys(refs.current);
        refsKeys.forEach(refKey => {
            if(!formState[refKey]) {
                setFormState(prevState => {
                    return {
                        ...prevState,
                        [refKey]: {
                            value: '',
                            touched: false,
                            untouched: true,
                            pristine: true,
                            dirty: false
                        }
                    }
                });
            }
        });
    }, [ refs ]);

    return [ register ];
}

export { useForm };

And the app component as below

const App = () => {

    const [ register ] = useFormsio();

    return(
        <form>

            <input
                type = 'email'
                placeholder = 'Enter your email'
                name = 'userEmail'
                ref = { register({ name: 'userEmail' }) } />

            <button
                type = 'submit'>
                    Submit
            </button>

        </form>
    )
}

How to solve this multiple rendering issue?

Answer 1

I think the issue in the code above is whenever refs changes you need to loop through all the fields in form and set the state. Why don't you set the state in register method?

const register = useCallback(( fieldArgs ) => ref => {
        if(fieldArgs) {
            const { name, validations, initialValue } = fieldArgs;
            if(!refs.current[name] ) {
                refs.current[name] = ref;
                setFormState(prevState => {
                    return {
                        ...prevState,
                        [refKey]: {
                            value: '',
                            touched: false,
                            untouched: true,
                            pristine: true,
                            dirty: false
                        }
                    }
                });
            }
        }
        console.log('Register rendered');
    }, []);