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

Question

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.

You're violating one of the [rules of hooks](https://reactjs.org/docs/hooks-rules.html). `if(something){ utilNavTo('/somewhere'); }` should not be in an if statement. — evolutionxbox, May 14 '22 at 12:33
seems right @evolutionxbox because the function `utilNavTo()` inturn calls the hook and it goes inside a condition block... that means no workaround apart from passing the hooks to the functions? :( — M.Imran Mamda, May 14 '22 at 12:48
May be I can create custom hook instead of utility functions? and call that hook on top level in the function component? then I can use it in any depth I guess.... ? — M.Imran Mamda, May 14 '22 at 12:50

score 2 · Accepted Answer · answered May 14 '22 at 18:57

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');
  }

  ...
};

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

1 Answers1

Issue

Solution