CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-context
M.Imran Mamda
M.Imran Mamda

Reputation: 444

Uncaught (in promise) Error: Invalid hook call. - SPECIAL CASE

I know that hooks cannot be called from functions other than React Functional Components, this is a bit different.

I have created some utility/service type functions that need to use hooks.

// somewhere in services files...
const utilNavTo = (route) => {
    const navigate = useNavigate();
    ...
};

// somewhere in components for screens...
const MyScreen = () => {
   ...
   if(something){
      utilNavTo('/somewhere');
   }
   ...
};

// the main app is created with <App /> not App, so that should not be the reason of error
ReactDOM.render(<App />, document.getElementById("root"));

// also App is fully defined with routes having <MyScreen /> defined properly...

When such a function is used within a React Functional Component, I get this error:

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

If I call the hook from the react functional component and pass it to the utility function, it works perfectly well.

Is there some way to make this work without passing the hooks as arguments? I guess it should only fail if the utility function itself is not called from a functional component.

Upvotes: 1

Views: 1119

Answers (1)

Drew Reese
Drew Reese

Reputation: 202706

Issue

The issue here is that the code is calling useNavigate in a callback function, conditionally. This breaks the rules of hooks:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders.

Solution

Convert the utilNavTo into a custom React hook that returns a function for a component to use. The hook should be called in the function component body.

Example:

// somewhere in services files...
const useUtilNavTo = () => {
  const navigate = useNavigate();

  const utilNavTo = (route) => {
    ...
  };

  return utilNavTo;
};

...

// somewhere in components for screens...
const MyScreen = () => {
  const utilNavTo = useUtilNavTo();

  ...

  if(something){
    utilNavTo('/somewhere');
  }

  ...
};

Upvotes: 2

Related Questions