'___' is most popular hook in ReactJs ?
Tags: javascript, react, beginners, webdev
Published: 2022-05-11 16:06:59

Before we reveal the most popular hook ( the secret is already out , it's useState !), lets try and understand what are React hooks and why do we need them in the first place?

Hooks are basically functions which help you *hook into* the React state in functional components. If you are new to React, just know that this hooks basically helped decrease the lines of code written significantly ! 


Here is an example of class based components, which was the default way to write components before React 16.8 (2018) (*this was when React hooks were released*)


The old way :

```javascript
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
```

The new way : 

```javascript
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

React Hooks made React developers lives easier , hence made React's learning curve much less steeper , increasing it's popularity. 

And , the most popular hook used in ReactJs is ..... 

##useState() !


![Surprise but no surprise!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkzr3e8lf6qdtx9kyabb.gif)

In simple language, useState is a way to store and use , any kind of data in our react component. 
Above , we saw the the example of how useState works as a counter. 

Few points to remember about useState : 
`const [counter ,setCounter] = useState(0)`

1. It uses array destructuring to get two things. The data (counter), and a function to set the data (setCounter). 
2. You can use the `counter` directly in your JSX code like so : `{counter}`
3. You can use the `setCounter` function to set data to the state like so : `setCounter(10)` 
4. You can also use Objects or arrays as the data in the useState, making it a powerful tool to render out data. 

Here are 3 examples of useState() to make our understanding of useState ironclad. 

1.Color selector : 
Use the state to change color of the text :

```javascript
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [textColor, setTextColor] = useState("");
  return (
    <div className="App">
      <h1 style={{ color: textColor }}>Hello CodeSandbox</h1>
      <button onClick={() => setTextColor("red")}>Red</button>
      <button onClick={() => setTextColor("blue")}>Blue</button>
      <button onClick={() => setTextColor("green")}>Green</button>
      <button onClick={() => setTextColor("black")}>Reset</button>
    </div>
  );
}
```
See the [result](https://codesandbox.io/s/divine-pine-smkn4o)

2.List rendering and updating using state : 

```javascript
import { useState } from "react";
import "./styles.css";

export default function App() {
  const data = [
    { name: "Onkar", age: 28 },
    { name: "Tushar", age: 24 },
    { name: "Amira", age: 29 }
  ];
  const [userData, setUserData] = useState(data);
  const removeHandler = (obj) => {
    setUserData(userData.filter((person) => person !== obj));
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ul>
        {userData.map((obj) => (
          <li>
            {obj.name} is of the age {obj.age}{" "}
            <button onClick={() => removeHandler(obj)}>remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}
```
See the [results](https://codesandbox.io/s/suspicious-taussig-x0wgkg)

3.Using state to use Dark mode for an app:
```javascript
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [theme, setTheme] = useState("");
  return (
    <div className="App">
      <div className={`app-container ${theme}`}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={() => setTheme("dark")}>Switch to Dark mode</button>
        <button onClick={() => setTheme("")}>Switch to Light mode</button>
      </div>
    </div>
  );
}

```

See the [results](https://codesandbox.io/s/vibrant-sid-q55y1e)

---

I hope you now have a fair Idea of how the useState hook works and are going to be able to use the hook in your beginner journey of being a FrontEnd Developer ! 

You can always contact me on [twitter](www.twitter.com/i_am_onkar) ! 

Happy Hacking !