How to fix this Maximum depth exceeded error with useEffect and useState?

Question

I have events which is pulled from redux, and if the events array contains data, then updateData will be used to filter events into the state var data.

I have data and events both added to the dependency array as talked about here. but I'm still getting this error:

const SingleTable = () => {
    const events = useSelector(state => eventsSelector(state));
    const [data, updateData] = useState([]);
    const [sortCol, updateSortCol] = useState(0);
    const [sortDir, updateSortDir] = useState('ascending');

    useEffect(() => {
        const formattedArray = events ? formatLoss(events): [];

        events && updateData(formattedArray);
    }, [data, events]);

    //...

Thoughts, ideas?

Answer 1

Because you are executing useEffect callback whenever data changes and you are changing data in useEffect callback.

Remove data as dependency.

Use this code to fix it

const SingleTable = () => {
const events = useSelector(state => eventsSelector(state));
const [data, updateData] = useState([]);
const [sortCol, updateSortCol] = useState(0);
const [sortDir, updateSortDir] = useState('ascending');

useEffect(() => {
    const formattedArray = events ? formatLoss(events): [];

    events && updateData(formattedArray);
}, [events]);

//...