Now that we have learned about the different alternatives to conditional Hooks, we are going to solve the problem that we had in our small example project earlier. The simplest solution to this problem would be to always define the Hook, instead of conditionally defining it. In a simple project like this one, always defining the Hook makes the most sense.
Edit src/App.js and remove the following conditional Hook:
const [ name, setName ] = enableFirstName
? useState('')
: [ '', () => {} ]
Replace it with a normal Hook, such as the following:
const [ name, setName ] = useState('')
Now, our example works fine! In more complex cases, it might not be feasible to always define the Hook. In that case, we would need to create a new component, define the Hook there, and then conditionally render...