React useEffect Hook complains about missing dependency-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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]);

CodePudding user response：

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]