Rendered more hooks than during the previous render when adding a hook component

Question

I have a useInput hook component that works like this:

useInput(
    <input placeholder="phone number" />,
    "phone"
  )

It gets an (input,inputName) and returns a hooked input component. When I want to dynamically change the visibility of existing input in my view, I get an error: Rendered more hooks than during the previous render.

{this.state.showMyInput && useInput(
        <input placeholder="phone number" />,
        "phone"
      )
}

Answer 1

From react documentation you can't use a hook with conditionnal operator.

You can call hook all the time and store the result in a variable, and just condition the render instead.

const input = useInput(input, inputName);
...    
{this.state.showMyInput && input}

Answer 2

As per the react docs, you shouldn't invoke hooks inside a conditional statement. Instead, use the conditional inside your hook: As explained here

Answer 3

my problem was that I had used the useState hooks after a return statement on my code, like:

function myComponenet () {
   if(loading) {return <Loading/>}

   const [myVar, setMyVar] = React.useState({})

   // my main component UI begins here

   <View>.....</View>
}

I had to move this const [myVar, setMyVar] = React.useState({}) line, above the if statement and that solved my problem