Hooks in react js are functions, which let you to use state inside the functional components. Hooks are used to associate the state to the functional component.
Before the hooks were introduced, if we wanted to use the states in our components, then we had to convert it to the class based component. As we all know functional components are a lot easier to understand and write. Therefore, hooks came to take there game one level up.
There are many hooks available in react js like useState(), useEffect(), useMemo(), useReducer(), useContext() etc. We can also create are own hooks.
There are some conditions which we have to follow, if we want to use hooks in our components.
- Hooks must be used inside the react components, not in any regular javascript function.
- Hooks must not be used inside the local blocks, loops.
- Hooks must appear at the top of the component functions.
Hooks in React JS
1. useState() :
useState() hook is used to track the state of the component. A state contains the data of a component at any particular instance of a time.
To use the useState() hook, First we have to import it.
The useState() hook takes initital state as a parameter and returns two values, i.e. current state and the function to update the state. We can’t update the state directly.
2. useEffect() :
useEffect() is a hook used in react js to handle the side effects like fetching the data or updating the DOM, if a particular event occurs.
In order to use useEffect() hook, we first have to import it.
useEffect() hook takes two values, one is the function to be executed and another is the dependency array. The dependency array contains the value upon whose updation the useEffect() hook will re render. If you want that the useEffect() hook should render only once then you can pass a empty array.
3. useContext() :
useContext() hook is used to manage the state of the whole application. It is used to pass the data in all the components without using the prop drilling. Whenever the components are nested deeply inside the component tree, at that time passing states using props become cumbersome. In that case the useContext() hook comes to rescue us.
We can create a context using the createContext() method.
To use context inside the components, we have to wrap the components inside the method provided by the react, which is <context_name.Provider></context_name.Provider>.
Now for using the context values, we have to use the useContext() hook, which takes the context object which is returned by the createContext() method and it returns back the current value of that context.
4. useReducer() :
useReducer() hook in react js is used to manage the state. Its purpose is similar to the useState() hook but it is preferred in complex applications where the state logic is complex and has different types of functions to perform the updation.
Syntax:
const [currentState, dispatchAction] = useReducer(reducerFunction, initialState, init)
useReducer() takes 3 arguments reducerFunction which will be used to change the state, initial state of the application and a init function which is used to load the initial state lazily.
5. useRef() :
useRef() hook is used to persist a particular value between multiple renderings, For example , if we want to count how many times a particular component got rendered.
