Mostly, we create a class component when we have a requirement to maintain a state or to use life cycle methods in our component. But in reality, there is no actual class present in React which means classes in React are just syntactic sugar to provide resemblance with more popular OOPs classes and these class components will eventually convert to functional components.<\/p>\n
But in order to achieve resemblance with OOPs classes, the classes in React has created more damage than the advantages it has to offer.<\/span><\/p>\n Reasons to avoid class components and creation of Hooks: –<\/b><\/p>\n To overcome these impediments, React team came up with a new concept called \u201cHooks\u201d. <\/span><\/p>\n According to React Documents,<\/b><\/p>\n A Hook is a special function that lets you \u201chook into\u201d React features.<\/b><\/p>\n The idea behind Hooks is to provide all the capabilities that we get in a class component to a functional component. The two most common capabilities of class components are state and life cycle methods. Below I have given some examples which shows how we can use hooks to achieve the two aforementioned class component capabilities.<\/p>\n State with Hooks<\/b><\/p>\n Example 1<\/b><\/p>\n Let\u2019s take an example to understand how to create and use state in a functional component wit<\/span>h the help of hooks : –<\/span><\/p>\n In this example, we can observe a new term called \u2018useState\u2019 that we have de-structured from the react API. This useState is a hook which helps in creating a state in a stateless or functional component. <\/span><\/p>\n Basically useState is a method in which we can pass argument and that argument will be treated as the default or initial value of the state variable. If we don\u2019t pass any argument than undefined will be assigned to the state variable. Here that state variable is \u2018increment\u2019. useState method returns a pair of values: the current state and the method to update it.<\/p>\n const [ increment, setIncrement ] \u00a0= useState(0)<\/span><\/p>\n This line of code will create a state variable called increment and allocate 0 value to that variable. To assign a different value to this variable we have defined a method called \u2018setIncrement\u2019. So whenever we want to change the value of this variable we can do it only through setIncrement as we did while clicking the button.<\/p>\n \u00a0Example 2<\/b><\/p>\n Let\u2019s take another example in which we will use useState more than once to create multiple state variables :-<\/span><\/p>\n Here in this example we are using two useState to create two separate state variables and also we have two different methods to assign new values to these state variables. In the similar fashion we can create any number of state variables using multiple useState hooks and assign them different default values and also create their separate methods to handle each one of them.<\/p>\n \u00a0Life cycle methods with Hooks<\/b><\/p>\n To provide life cycle methods capability to functional component React provide us a hook called useEffect. useEffect hook serves the same purpose as componentDidMount, componentDidUpdate and componentWillUnmount. Let\u2019s take some example to understand the usage of useEffect hook : –<\/p>\n Example 1<\/b><\/p>\n In this example, we can observe a new term useEffect that we have de-structured from the React API. This useEffect is a hook which helps in providing componentDidMount as well as componentDidUpdate life cycle method capability to this functional component.<\/span><\/p>\n Basically useEffect is a method which takes a function as an argument. In this example after the component is rendered useEffect will be called for the first time that means it is acting as the componentDidMount life cycle method and it will change the title of the document. Now, if the user clicks the button, state variable \u2018increment\u2019 value be updated and the component will be rendered again. After rendering, useEffect will be called again but this time it will act as componentDidUpdate. So now every time the component is rendered, useEffect will be called.<\/p>\n Example 2<\/b><\/p>\n Similar to useState, we can use multiple useEffect method in a single functional component. Let\u2019s take another example to explain that scenario : –<\/span><\/p>\n Here in this example, we are using more than one useEffect method and both will run after each render.<\/span><\/p>\n Example 3<\/b><\/p>\n\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/04\/image1-300x152.png\")
<\/p>\n![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/04\/image2-300x283.png\")
<\/p>\n![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/04\/image3-300x223.png\")
<\/p>\n![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/04\/image4-300x274.png\")
<\/p>\n
![\"\"](\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2019\/04\/pasted-image-0-300x288.png\")
<\/p>\n