React Hooks & Its Types :

Hooks are a feature that React added in the version of 16.8. They let us use state and other React features without switching from functional to a class component. React Hooks solve a wide variety of apparently detached problems in React that we’ve come across over the last couple of years of writing and maintaining thousands of components. Whether we learn React or use it daily, we usually solve this problem using other libraries or hacky tricks. React class-based components are messy, confusing, hard for maintaining large code files. But In advance of React 16.8, class-based members were required for any component that required states, lifecycle methods, and many other essential functionalities for maintaining the component internal state. All these changed after the introduction of hooks in React 16.8. Hooks are game-changers that helps us, developer, to write less & well maintained code. They have simplified React, made it neater, easier to write and debug, and reduced the learning curve. There are many hooks in react js. But the most common and most used hooks are useState() and useEffect().

useState() Hook :

The useState() is a React built-in Hook that permits us to have state variables in functional components without switching to class-based components. React has two types of components. One is class components which are ES6 classes that are the syntactic sugar over constructor function that extend from React, and the other is functional components. Class components a Component and can have state and lifecycle methods: class Message extends React. The useState hook is a special function that takes the initial state as an argument and returns an array of two elements. The first element of the array is the state variable, and the second one is a function that updates the state variable by simply taking a new value.

useEffect() Hook :

useEffect is a react builtin hook that helps us encapsulate code that has ‘side effects,’ and is like a combination of componentDidMount, componentDidUpdate , and componentWillUnmount. Previously, functional components didn’t have access to the component life cycle, but with useEffect you can tap into it. The motivation behind introducing the useEffect hook is to eliminate the side-effects of using class-based components. For example, tasks like fetching data from API end-points, updating the DOM, setting up subscriptions or timers, etc., can lead to unwarranted side effects.