Solving the React Hook useTranslation Error in Non-Component Functions

Learn how to fix the "React Hook `useTranslation` is called in function" error when using translation within regular functions in React.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React Hook "useTranslation" is called in function "getMyMenu" that is neither a React function component nor a custom React Hook function

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the React Hook useTranslation Error in Non-Component Functions

When developing applications with React, you may encounter certain errors that can be confusing and frustrating. One common issue arises when trying to invoke the useTranslation hook from within a standard function rather than the expected React function component or custom hook.

In this guide, we’ll take a closer look at this problem and provide clear, actionable solutions to effectively integrate the useTranslation hook into your workflow.

Understanding the Problem

You’ve written a function named getMyMenu where you attempt to call the useTranslation hook. However, this approach results in an error because hooks can only be used in function components or custom hooks.

The Code Example Leading to the Error

[[See Video to Reveal this Text or Code Snippet]]

Here, calling useTranslation directly in getMyMenu is problematic and the underlying reason for the error you see.

The Solution

The solution revolves around moving the useTranslation hook to the body of your React component (MyNav) and adjusting how you manage the translation logic.

Step-by-Step Fix

1. Move useTranslation to the Component

First, restructure your code to call useTranslation directly within the MyNav component. This allows you to access the translation function t and use it properly.

[[See Video to Reveal this Text or Code Snippet]]

2. Refactoring the Helper Function

If you want to keep the option to pass the translation function around, consider refactoring in a couple of ways. Here are two practical approaches:

Solution 1 - Pass t Explicitly

You can modify the function signature of your recurseFn and chain the translation function through to your getMyMenu function.

[[See Video to Reveal this Text or Code Snippet]]

Solution 2 - Using a Curried Function for getMyMenu

A more elegant solution is to make getMyMenu a curried function. This enables it to enclose t while keeping recurseFn unaware of the translation function.

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can avoid the common pitfalls associated with hooks in nonReact components and streamline the translation process in your React applications. Using either of the outlined solutions, you can ensure useTranslation is called correctly without errors, enhancing your application's internationalization capabilities.

Implementing proper practices when working with React hooks not only fixes current errors but also improves the overall maintainability of your code. Happy coding!