React Hooks

Hooks are a new addition in React 16.8 which allows you to use state and other React features without writing a class.
React hooks use features of the React library by calling special hook functions from within a component; we can build static components in React just by writing functions

function component() {
const [state] = usState('UI')
return
}

, however UI components are often dynamic "REACTIVE STATE" (e.g. they may need to change the state of their data , react to life cycle event , access elements form the DOM ..etc )

Prior to React 16.8, developers were required to write classes to take advantages of certain react features; you can still use classes in React but Hooks provide more ergonomic way to build components because you can re-use state for logic without changing components hierarchy.

REACT has 10 builtin hooks, and by the end of this article, you will understand every single one of them.

So why HOOKS exist in the first place ?
In the past, data that changes within the application was accompanied with a class based component

That means that if you wanted to work with reactive data you needed to create a component ; but this actually created a big mess of nested components

And that's one reason that made me hate React, although it was and still is the number one UI JavaScript library in the Tech market; I even have changed to Vue.JS for sometime; but then HOOKS showed up to remove reactivity from components ...

When you work with HOOKS, you cna think of them as lower level primitives of the React frame work that gives you special abilities that you would have with only using Vanilla JS

Hooks are just functions that start with the name USE :
useSuperAbility()

And the rule to work and use hooks is that you need to use them at the top level of a functional component; they don't work inside regular JavaScript [ except that if you will create your own custom hooks]

So, there are 3 Basic Hooks:

1- useState()
2- useEffect()
3- useContext()

And 7 Additional Hooks:

4- useReducer()
5- useCallback()
6- useMemo()
7- useRef()
8- useImperativeHandle()
9- useLayoutEffect()
10- useDebugValue()