Error in React: Rendered more hooks than during the previous render

Question

I am receiving the Error in React: Rendered more hooks than during the previous render. I checked other posts ,which addressed using conditionals with react hooks, but I am unable to diagnose a similar problem in my code. If I comment out the Object.keys portion of the code in challenges.js, the error does not show, but if I leave it in I get the error. I believe it is being caused by a bug in the keepsessionutils.js file. Please assist.

challenges.js

return (
    <div className="about">
      <div className="about-header">
        <div className="about-headerText">
          <h2> Dummy Challenge </h2>
          <h2> Dummy Challenge </h2>
          <h2> Dummy Challenge </h2>
          <h2> Dummy Challenge </h2>
          <h2> Dummy Challenge </h2>
          <hr />
              {Object.keys(valid_playlists).map(key => (
            <button type="button" onClick={createChallengeUtil(key)}>
              {valid_playlists[key]}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

createChallengeUtil.js

export default function createChallengeUtil(playlist_id) {
  // Check if there are at least 20 songs
  var token = KeepSession();
  // Populate Firebase with challenge data
}

keepsession.js

export default function KeepSession() {
    const [value, setValue] = React.useState(
    localStorage.getItem('myValueInLocalStorage') || ''
  );
  // Here I am just checking to see if we need to retrieve a new token or not.
   if (value === "undefined"){
    var token = getLocalToken();
   }
   else{
      var token = value;
   }
   // This block detects if the user refreshes the page and stores the current token if so.
    window.onbeforeunload = (e) => {
    // I'm about to refresh! do something...
    localStorage.setItem('myValueInLocalStorage', token)
            setValue(token);
    };
    return token
}

Answer 1

You need to take a look to React Hooks rules .

It will be better to apply another approach. Also, as I can see, you are calling KeepSession on each map iteration, but you are not using playlist_id to generate a different hook, so it ends up creating a bunch of hooks with the same name.

Also, at the end, what is the purpose of creating these Hooks inside of your function if you are not using them, nor returning a reference to it from KeepSession()?

Answer 2

As Long your valid_playlists modifies, you will be calling more hooks on line so when your list changes, will change times you are calling hooks.

React remembers hooks called and the order.

Try to change a little bit your approach. - Name useMyHook for any non component function using hooks. - Do not call function to create listeners onClick={doSomething()} - Do not use hook inside handlers createChallengeUtil is callling hooks

https://codesandbox.io/s/stack-react-hook-60960690-63yf2

I hope this this approach is fine for you.