Maximum update depth exceeded. infinite warning loop

Question

I want to get data from my local storage and store it in state so I don't have to refresh my page every time I want to update table. Here is my code I know I am doing some mistake here because I am learning react.js. I get this warning every second hundreds of time "Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."

    const [items, setItems] = useState([]);
    useEffect(() => {
    const items = JSON.parse(localStorage.getItem("value"));
    if (items) {
    setItems(items);
    }
    }, [items]);

How do I solve this?

Answer 1

The useEffect function starts an infinite loop. It calls setItems, but also depends on the items state so it sets the state indefinitely.

You can give useEffect an empty dependency array so it sets the Items only once on the first render.

const [items, setItems] = useState([]);
useEffect(() => {
    const items = JSON.parse(localStorage.getItem("value"));
    if (items) {
        setItems(items);
    }
}, []);