1

I have a React component that should only be displayed if the user are using the Electron browser. Hence, I want to have an early return in my React component so I don't execute a lot of logic if the user is not using the Electron browser. I have the following minimal example:

export const MyComponent = () => {
    if (!isElectron) {
        return <p>You need to use Electron</p>
    }
    useEffect(() => {  // <-- gives error: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
        console.log("You are using Electron");
    }, []);
    return <p>You are using Electron</p>
}

The useEffect in the example above gives the error: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. I simply want to ignore the error message for the whole file, and preferably not ignore other errors. How do I ignore the error message for a whole file?

3
  • 1
    Why not have the following check if (!isElectron) in the parent component which renders MyComponent? You cannot call hooks conditionally. Commented Feb 6, 2024 at 8:57
  • Just move that If condition below of useEffect and it will work. Commented Feb 6, 2024 at 9:02
  • @Maulik Patel, the code I've posted is a minimal example, in reality I've got lots of hooks below the early return statement and I don't want to execute lots of functionality if the user is not using an electron browser. That's why I would like to keep the early return statement on top. Commented Feb 6, 2024 at 9:58

2 Answers 2

3

What you can do is move that condition in the parent component, where you are rendering that component:

isElectron && <MyComponent/>

The error says that you are breaking one of the rules of hooks. So you can't do that.

Sign up to request clarification or add additional context in comments.

Comments

1

If you have the chance, then the solution posted by @Giorgi Moniava is absolutely what you should be doing. If you are using Eslint and Visual Studio Code, then you can add the following line to the top of a file to ignore all rules-of-hooks errors:

/* eslint-disable react-hooks/rules-of-hooks */.

2 Comments

I would not do that, the rules are there for a reason: legacy.reactjs.org/docs/hooks-rules.html. Also related: stackoverflow.com/questions/65704653/…
It is absolutely fine to do that, considering the conditions OP describes. Read the rule definition itself. The concern there "hooks must be called in the exact same order in every component render". The key component being "every component render". Considering that the isElectron() in op example never changes between renders is it perfectly fine to disable the linter error with eslint-disable (for that particular statement - disabling it across the board is still a big no-no) .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.