React Hooks - what, when and why?

A little bit about hooks history

Hooks was avaiable in version 16.8.0 for React and 0.59 for React Native.

In the class paradigm we use methods like componentDidMount and componentDidUpdate to handle states and the life cycle of a component. In addition to the codes becoming verbose, it does not helps with the componentization, as the state logic becomes complex. Not to mention bind, this and the event handlers... 

Below is an example of simple code written in the class paradigm:

What are those hooks?

Hooks allow us to interact with the states and lifecycle of React components using functional paradigm. In addition to making the code much simpler, it improves the development experience.

... but BE CAREFUL:

• Hooks cannot be called inside loops, conditions, or nested functions. They must be called at the highest level of your component.
• Hooks can only be called on functional components. Also, there is only one other place we can call them, within our own custom hooks - we will talk about them soon.
  

Here is an example of a functional component using hooks:FuncF

The useState and useEffect hooks are the most common, but there are others besides these. We are going to see the others later on.

Hope you all liked it. Stay tuned to receive more content about the React world.