Different Hooks In React
Uses Of Different Hooks in react native
If you have some experience in the React world, the above image might look familiar to you. This image represents handling states in a class component.
What are React components?
Components are the basic building blocks of React applications and are used to build the logic behind any application. These components are reusable, which means they can also reuse them in any other new application. They are basically of two types, Class components, and Functional components.
Although there are various exciting differences between these two types of React components, this article will solely focus on one significant difference, the use of ‘Hooks.’.
What are Hooks in React?
As mentioned at the beginning of this article, the image represents state management in React class components. During the initial days, it was only possible for users to handle the states of their members in Class components as this functionality was absent in Functional components.
However, this changed in October 2018, when React released the concept of ‘Hooks’ in Functional components. Hooks finally brought a ray of light towards these components as earlier, they lacked a lot of necessary functionalities, and hence class components were preferred by most users.
React consists of various types of ‘Hooks,’ each targeting a different functionality. Some commonly used React Hooks are useState, useReducer, usecallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, and useDebugValue. Here we will understand a few of these hooks thoroughly.
The useState hook is one of the most used hooks in React functional components, and it performs the same functionality given in a class by ‘this.state.’ In addition, it is used to update the state of an element in React, which was earlier only possible through the class components. Below is the example and comparison.
The first example above is how you can manage the state in class, whereas the second image displays the state management in function. And the most visible difference in both examples is the word ‘useState.’
In the class component, a state can be declared using a constructor, whereas, in the function, a user has to first import the state hook from react and then declare two variables, i.e., color and setColor. Here, ‘color’ is the initial state whose value is said to be ‘red’, whereas ‘setColor’ is the updated state triggered on clicking a button and changing to ‘blue.’
Use context Hook
This one will sound a lot more exciting and helpful to the users; however, to understand what a ‘useContext’ hook does, we first need to understand React Context.
In React, the state should be controlled by the top component, also called the parent component, which might require the use of the state. However, various other child components might also need this state, which might place at random levels.
To pass this state in any nested component, we will have to use “props” through each of these components using the useState hook, and this method is called “prop drilling.”
Now, this can be a lot of work, and who has that much time nowadays, especially the developers who are continuously creating new and unique things? So, React Context is a way to manage these types of states globally, which in turn removes the usage of prop-drilling. Here are a few examples to explain the concept:
In this snippet of code, the 3rd component, i.e., ‘Component 3’, needs to use the ‘person’ state, and although the second component doesn’t need it, it will still have to pass through it to reach its destination. That is a problem.
There is a simple solution to our above problem by using the React context. To make this work, we will simply have to wrap the child components in the Context Provider that we created in the parent component in the above image.
The primary function of a useRef hook is to store a mutable value that does not cause a re-render when updated. When a user initializes the useRef theme, they set its initial value to useRef(0), and it only returns one item, an object called current. One can also use this React hook to keep track of previous state values.
By now, we all have understood the use of our personal favorite useState hook, but what you might not know about it is that to manage complicated states such as a list of items, where a user will have to add, update and delete items in the condition, useState is not a good option.
This is because useState contains the state management logic and the rendering logic in one place, which is not an ideal way.
Hence, the useReducer Hook comes to the rescue for this problem as it separates these two logics by uprooting the state management out of the component.
A useEffect hook is another widely and most often used hook in React. Like in class components, users place the side effects into componentDidMount and componentDidUpdate. In function components, we use the ‘useEffect’ hook for that purpose.
But what are these side effects? Fetching data, timers in functions, and updating the DOM can all be classified as the side effects of a React component. Here is an example.
A useEffect hook accepts two arguments, i.e., a function and a dependency. The theme uses an anonymous arrow function and ‘count’ as a dependency in this example. Therefore whenever the count variable updates, every time the use effect function will run again.
These are just a few examples among the wide variety of React Hooks used in functional components to enhance their functionalities and give tough competition to our beloved class components. You can learn about them through the official React Documentation.