React.useEffect has missing dependecies

user_10010623 0
Viewed 41

So, I get the error of React.useEffect has missing dependencies: 'initialValue' and 'itemName'. Either include them or remove the dependency array. but I only want to run the effect one time, so I need to use [] without dependencies, I could use itemName so the effect run when itemName is updated but I still get the error with initialValue, and I cant remove either include it. It's ok to ignore it?

Also, in this code there is a console.log, why it is being printed 2 times, any idea?

import React from "react";

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);
  }, []);

  console.log("This prints 2 times");

  return {
    item
  };
}

export { useLocalStorage };

This is where I use useLocalStorage:

const AppContext = React.createContext();

function AppProvider(props) {
  const { item: expenses } = useLocalStorage("ITEMS_v1", []);

  return (
    <AppContext.Provider
      value={{
        expenses
      }}
    >
      {props.children}
    </AppContext.Provider>
  );
}

export { AppContext, AppProvider };

Here in codesandbox.io is the code working.

reactjs
1 Answers

What you are doing is just fine. But if you want to get rid of the warning, you can do like that:

const refItemName = React.useRef(itemName);
const refInitialValue = React.useRef(initialValue);

React.useEffect(() => {
  const localStorageItem = localStorage.getItem(refItemName);
  let parsedItem;

  if (!localStorageItem) {
    localStorage.setItem(refItemName, JSON.stringify(refInitialValue));
    parsedItem = refInitialValue;
  } else {
    parsedItem = JSON.parse(localStorageItem);
  }
  setItem(parsedItem);
}, []);

And it's running twice because you are on development environment. It happens due to Strict Mode

user_137839920
Related