#StackBounty: #javascript #reactjs #use-effect #react-functional-component React Maximum update depth exceeded in functional component

Bounty: 100

In my react functional component, I have a function that is executed to toggle the checkboxes as selected or unselected. It works fine.

The function goes like this:

const handleCheckboxChange = useCallback((value) => {
    const selectedFilters = state.identifiers_checkbox[
        "selected_checkboxes"
    ].find((obj) => obj === value);

    const selected_checkboxes = selectedFilters
        ? state.identifiers_checkbox["selected_checkboxes"].filter(
            (obj) => obj !== value
        )
        : [...state.identifiers_checkbox["selected_checkboxes"], value];

    const toggled_checkboxes = {
        selected_checkboxes,
        options_checkbox: [
            ...state.identifiers_checkbox.options_checkbox.map((filter) => {
                return {
                    ...filter,
                    options: filter.options.map((ele) => {
                        return {
                            ...ele,
                            checked: selected_checkboxes.includes(ele.key),
                        };
                    }),
                };
            }),
        ],
    };

    dispatch({
        type: "update-checkboxes",
        payload: {
            selected_checkboxes: toggled_checkboxes.selected_checkboxes,
            options_checkbox: toggled_checkboxes.options_checkbox,
        },
    });
}, [dispatch, state.identifiers_checkbox]);

Additionaly, I need to call this function as the component mounts & then automatically mark any of the checkbox as selected according to the name of the checkbox passed as argument.

For this, my approach is:

useEffect(() => {
        //need to invoke handleCheckboxChange if this true
        if (info.prevui === 'intervention') {
            // if all the checkboxes has been fetched with initial state as false/unselected
            if (state.identifiers_checkbox.options_checkbox.length > 1) {
                handleCheckboxChange("label1");
            }
        }
    }, [state.identifiers_checkbox, info.prevui, handleCheckboxChange]);

The "label1" is the one of the value/key of a checkbox that needs to be set to checked:true. The handler function works fine if it is invoked onChange() of any of the checkbox, but when trying to invoke it on render on the basis of a particular condition, it doesn’t works.

It throws Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Since, I need to execute this function only once even on render also i.e. (when info.ui === intervention’ & info.ui also does not change every time ), this error behaviour of useEffect() is out of my understanding.

Can anyone please helpout to understand and provide any working hint/solution for the same?

Thanks


Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.