React useEffect Hook complains about missing dependency

Question

I have two components that talk to each other. In component A I have a list of locations and whenever a user clicks on one of the locations in this component this filters a list of properties in component B dependent on the clicked location. This works, so far so good. But in component B I use a useEffect hook to check for the selectedLocation variable that comes to it via props from component A so I can update the state. And in this useEffect() call VS Code complains that "React useEffect Hook has a missing dependency "...dataState". But of course I can't put the dataState in to the dependency array because it would cause an infinite loop. And by the way, dateState is managed via a useState Hook. Here is my useEffect hook:

    //  If there is a new selected location from the treeview, update the grid state
useEffect(() => {
    const newState: State = {
        ...dataState,
        filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    };
    setDataState(newState);
}, [selectedLocation]);

Any help would be appreciated.

Kamal Alhomsi · Accepted Answer · 2021-11-05 08:42:19Z

2

Try to set dataState like that:

useEffect(() => {
    setDataState(oldDataState => ({
        ...oldDataState ,
        filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    }));
}, [selectedLocation]);

This way it would be considered as a parameter instead of a dependency.

answered Nov 5, 2021 at 8:42

Kamal Alhomsi

6811 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rikeeeshi · Accepted Answer · 2021-11-05 09:05:42Z

1

You can also do by creating another state like

const [newDataState,setNewDataState]=useState();
useEffect(() => {
    const newState: State = {
        ...dataState,
        filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    };
    setNewDataState(newState);
}, [selectedLocation,datastate]

);

now use newDataState as dependency in second useEffect and set state of your original state.

useEffect=()=>{
    setDataState(newDataState);

},[newDataState]

answered Nov 5, 2021 at 9:05

rikeeeshi

808 bronze badges

Comments

Md. Abu Sayed · Accepted Answer · 2021-11-08 07:21:43Z

1

Actually, "...dataState" isn't define in your B component. so it's showing missing dependency you needed a reference for this like this:

useEffect(() => {
     setDataState(dataState=> ({...dataState, filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    }));
}, [selectedLocation]);

edited Nov 8, 2021 at 7:21

answered Nov 5, 2021 at 9:02

Md. Abu Sayed

2,5363 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

React useEffect Hook complains about missing dependency

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related