Solving common problems with Hooks

As we found out, implementing Hooks with the official API also has its own trade-offs and limitations. We are now going to learn how to overcome these common problems, which stem from the limitations of React Hooks.

We will take a look at solutions that can be used to overcome these two problems:

• Solving conditional Hooks
• Solving Hooks in loops

Solving conditional Hooks

So, how do we implement conditional Hooks? Instead of making the Hook conditional, we can just always define the Hook and use it whenever we need it. If this is not an option, we need to split up our components, which is usually better anyway!

Always defining the Hook

For simple cases, such as the first and last name example that we had previously, we can just always keep the Hook defined, as follows:

1. Copy the Chapter02_2 folder to a new Chapter02_3 folder, as follows:

   $ cp -R Chapter02_2 Chapter02_3
   

2. Open the...