Reactjs Hooks - more power to the functional components

React Team announced the Hooks in V16.8. There was a lot of excitement around hooks and it should be. The way React community is understanding the improvement areas in reacting for the developer and as well as for the web applications it is an outstanding job. 

Before jumping to Hooks a few things to note: 

- class support will remain

- Facebook team is using Hooks only in the new code product/code base, not in old code.

What is React Hooks?

Hooks are simple functions. You can use them to use the states in the functional components. These functions Hook onto the react state and lifecycle and help the developer to write more reusable logic and shareable code between components.

Why we need Hooks?

Before V16.8, the only way to reuse the logic is either by HOC and renderProps for which you need to restructure the whole component structure. Similarly, if you will be writing complex components - then you will end up every time restructuring your components and as well as a lot of wrappers in the DOM. 

So, hooks try to sort all these for us. We don't need to move to Classes, we can use Hooks to use state and lifecycle. We can reuse the logic and share between components. After hooks, the components structure would be easy and as well as we will be less using this.

Type of Hooks?

- useState()

- useEffect()

- useContext()

- useReducer

- useMemo

- useRef

- useCallback

- useDebugValue

- useLayoutEffect

- custom hooks

Rules of Hooks?

Hooks are just javascript functions. So,

- Do not call them in - loops, conditions, avoid nested functions

- Call them only from React functions only.

Do we need to do break up with classes?

To a certain yes. As per the documentation says, you don't need to refactor the code as of now. Classes support will remain.

Code:

https://codesandbox.io/embed/6yr0m9v7qk