I have this problem Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. with my useLocalStorage custom hook.
I can't find a solution, there is no use of useEffect or any loop in the code.
Here is the custom hook for useLocalStorage:
function useLocalStorage(itemName, initialValue) {
const [item, setItem] = React.useState(initialValue);
const localStorageItem = localStorage.getItem(itemName);
let parsedItem;
if (!localStorageItem) {
localStorage.setItem(itemName, JSON.stringify(initialValue));
parsedItem = initialValue;
} else {
parsedItem = JSON.parse(localStorageItem);
}
setItem(parsedItem);
const saveItem = (newItem) => {
const stringifiedItem = JSON.stringify(newItem);
localStorage.setItem(itemName, stringifiedItem);
setItem(newItem);
};
return {
item,
saveItem,
};
}
export { useLocalStorage };
Here is the context provider, if I delete the line where I call useLocalStorage, the error disappears, so the problem is with the useLocalStorage.
import react from 'react';
import { useLocalStorage } from './useLocalStorage';
import * as utils from '../utils';
const AppContext = react.createContext();
function AppProvider(props) {
const {
item: expenses,
saveItem: saveExpense,
} = useLocalStorage('ITEMS_v1', []);
const addExpense = (name, value, date) => {
const newExpenses = [...expenses];
newExpenses.push({
name,
value,
date,
});
saveExpense(newExpenses);
};
const deleteExpense = (name) => {
const expenseIndex = expenses.findIndex(expense => expense.name === name);
const newExpenses = [...expenses];
newExpenses.splice(expenseIndex, 1);
saveExpense(newExpenses);
};
const today = utils.getToday();
return (
<AppContext.Provider value={{
today,
addExpense,
deleteExpense,
}}>
{props.children}
</AppContext.Provider>
);
}
export { AppContext, AppProvider };
It seems to me that the problem is coming from calling the setItem directly in the useLocalStorage. your code will most likely work if you wrap this part:
const localStorageItem = localStorage.getItem(itemName);
let parsedItem;
if (!localStorageItem) {
localStorage.setItem(itemName, JSON.stringify(initialValue));
parsedItem = initialValue;
} else {
parsedItem = JSON.parse(localStorageItem);
}
setItem(parsedItem);
in a useEffect hook with an empty dependency array.
You are calling setItem(parsedItem) in the body of the hook, so everytime function run setItem(parsedItem) will be invoked which will again call setItem(parsedItem) and this will lead to infinite loop.
Never update state in the body of the function. use useEffect hook to update the state initially.
function useLocalStorage(itemName, initialValue) {
const [item, setItem] = React.useState(initialValue);
React.useEffect(()=>{
const localStorageItem = localStorage.getItem(itemName);
let parsedItem;
if (!localStorageItem) {
localStorage.setItem(itemName, JSON.stringify(initialValue));
parsedItem = initialValue;
} else {
parsedItem = JSON.parse(localStorageItem);
}
setItem(parsedItem);
},[])
const saveItem = (newItem) => {
const stringifiedItem = JSON.stringify(newItem);
localStorage.setItem(itemName, stringifiedItem);
setItem(newItem);
};
return {
item,
saveItem,
};
}
export { useLocalStorage };