Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

231
Views
Too many re-render using context provider and localstorage

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 };
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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 };
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!