Learn React Hooks | 10 React Library Explained

You can start learning Hooks on this video. Here, I’ll continue by explaining the top 10 hooks of react js. This is an amazing video where I have explained every hook with different types of slide shows, diagrams, paintings, etc. After watching the video you will have complete knowledge about the top 10 libraries of React hook and it will also help you to attend an interview.

Short Summary:
React has 10 built-in hooks. And in this video, I have discussed all of the hook features.

What is react hook?
Before hook developers were written code in class-based components and it was tightly coupled. After that, React introduced hook with some exciting features. Hook is like, you can pick of them, like building blocks. Remember that the hook itself is a function, which always starts with the “use” keyword.

1. useState():
useState is the most important hook. It imports directly from the react library, at the top of the component. The purpose of useState is to handle reactive data. The hook takes one optional argument. The first value is the "reactive data" that we will use in our component. And the second value is called "setter" so that the user can assign the value. The function returns an array, that contains two values to use in your component.
If the value changes in the future, react will automatically rebuild the UI to show the latest value.

2. useEffect():
useEffect is combination of 3 life-cycle:
componentDidMount,
componentDidUpdate,
and componentWillUnmount.

useEffect is a function that takes two arguments, the first argument is your defined method and the second argument is optional. The second argument we called dependencies. If there is an empty array. So, there are no dependencies. This means it will run only when the component will initialize. If you give any state name in this third bracket, in this case, it will run when the state changes.

3. useReducer()
useReducer is an alternative or very similar to useState. Instead of updating the state directly, you will create a dispatch action that will go to a reducer function, and the return of the reducer function determines what will be the next step. useReducer returns an array with two values.
The first value is the state that you can use in the UI, and the 2nd value is the function that dispatches an action.

4. useRef()
useRef Hook is a function that returns a mutable ref object. useRef is very similar to setState, but you know that in useState the component re-render when the state is updated. When the useRef value change, it doesn't re-render the component. useRef is mainly used to reference elements in HTML element, and in the HTML is used with a "ref" attribute.

To know all the hooks, please watch the video.

Resources:
-----------------

Editor for coding: VS Code 2017, Google Chrome

Special Thanks to Youtube, Google

0:00 Introduction
0:50 What is Hook
01:32 What is useState
03:05 What is useEffect
04:42 What is useContext
05:52 What is useReducer
07:05 What is useRef
08:16 What is useMemo
09:45 What is useCallback
10:58 What is useImperativeHandle
12:20 What is useLayoutEffect
13:13 What is useDebugValue