Invalid hook call in work with local Storage

Viewed 246

I have a 3 files:

  • Main component,
  • File with states that are stored in local storage
  • A file with a reset function for resetting these same states to default values.

I import the file with the states and reset file in the main component and everything is ok. But when I try use reset function for set localState value to default, i got error “Error: Invalid hook call. Interceptors can only be called inside the body of a functional component. "

I read the documentation on react, but I did not understand the error

First file code:

import React from "react";
import { LocalStorage } from "./localState";
import { resetLocalStorage } from "./resetLocalState";

function App() {
  const localState = LocalStorage(); // local storage keys
  const resetState = () => resetLocalStorage(); // reset local storate states

  return (
    <div>
      <button onClick={() => resetState()}>Refresh State to default</button>
      <br />
      <button
        onClick={() => localState.setLocalStorageState("State was changed")}
      >
        Change State
      </button>
      <p>{localState.localStorageState}</p>
    </div>
  );
}

export default App;

Second file code:

import { useState, useEffect } from "react";

const useLocalStorageList = (key, defaultValue) => {
  const stored = localStorage.getItem(key);
  const initial = stored ? JSON.parse(stored) : defaultValue;
  const [value, setValue] = useState(initial);

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

//local storage keys
export const LocalStorage = () => {
  const [localStorageState, setLocalStorageState] = useLocalStorageList(
    "State",
    "Default Value"
  );

  return { localStorageState, setLocalStorageState };
};

Third file code

import { LocalStorage } from "./localState";

export const resetLocalStorage = () => {
  const localState = LocalStorage(); //local storage keys
  localState.setLocalStorageState("Default Value");
};

Link to SandBox

2 Answers

I didnt see anything to reset all states in your resetLocalStorage(). I assume you will keep track of all the 'local storage keys' and define reset-functions for each. This example modifies your hook to return a third function to reset the state so another reset-function doesn't have top be defined.

https://codesandbox.io/s/smoosh-sound-0yxvl?file=/src/App.js

I made few changes in your code to achieve the use case you were trying to achieve. (Let me know my implementation is suffices your use case)

The resetLocalStorage is not starting with use That's why you were getting the previous error. After renaming that function to useResetLocalStorage, still it will not work since -

you were calling the custom hook onClick of button. This breaks one react hook rule which is react hooks must not be called conditionally https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

Related