React Hooks I use everyday.
Tags: react, beginners, tutorial, webdev
Published: 2020-11-27 09:46:46

In this post I will list out all the React Hooks I use in a daily basis for my projects.

Here are the list of them.

1. useState.
2. useRef.
3. useEffect.
4. useDispatch.
5. useReducer.
6. useSelector.



<strong>1. useState:</strong>

```js

const[state,setstate] = useState(false);

```

React's useState is used to take care of the state of the React component.

It is used all the time during projects for transferring props from one component to another component.

There are a lot of usecases for useState.

<strong>2. useRef</strong>

```js

const node = useRef()
<div ref={node}></div>

```

UseRef is used to manipulate the dom elements just like we do in vanilla JS like,
- QuerySelector with addEventListener

or with React class component like,
- React.createRef()

useRef has <strong>.current</strong> which we can be used to manipulate the html attributes like <strong>value,name</strong> in React.

<strong>3. useEffect</strong>

```js
useEffect(()=>{
const getuser = async () => {
const res = await axios.get('api_url')
}
getuser()
},[])

```

UseEffect is similar to <strong>compononetDidMount</strong> but in a more easy manner.

When we want to load user data from our backend API when the page loads for the first time we can use <strong>useEffect.</strong>

By using the empty braces([]) in the second argument, we instruct react to call the <strong>getuser function</strong> only once when the page loads.

<strong>4. useDispatch</strong>
```js
const dispatch = useDispatch()
```
UseDispatch is used to dispatch an action when we are using  Redux for central state management in our website.

This comes from the <strong>'react-redux'</strong> module and is super handy.

Before this we have write <strong>mapdispatchtoprops</strong> but <strong>useDispatch</strong> replaced it.

<strong>5. useReducer</strong>

UseReducer is used when we are dealing with Context API.

<strong>6. useSelector</strong>
```js
const selector = useSelector(state => state.reducer.variable)
```
useSelector is used to get the state of the redux's central state.

We can easily manipulate the state with the useSelector hook.

Before useSelector was introduced we need to use <strong>mapstatetoprops</strong>.

These are the list of React hooks I use everyday.

If there are more hooks you use, please share in the comments and let myself and fellow developers know about it.

You can also create <strong>custom hook</strong> yourself and <strong>reuse</strong> it in your application as well.

### Thank you for reading!!

<strong> <u>Check out my portfolio: </u> [Gautham's portfolio](https://gautham-portfolio.netlify.app/)</strong>

<strong> <u> Check out my blog: </u>[coding-magnified.tech](https://coding-magnified.tech)</strong>


### <u>My Other Articles: </u>

- [Universal CSS properties everyone must know](https://dev.to/gautham495/universal-css-properties-everyone-must-use-4kie)

- [Create-react-app](https://dev.to/gautham495/creating-a-new-react-app-with-create-react-app-4e9m)

- [Git for beginners](https://dev.to/gautham495/basic-git-knowledge-for-beginners-m4p)

- [Change headers in react with react-helmet](https://dev.to/gautham495/changing-headers-in-react-with-react-helmet-d0d)

- [Know How to apply box-shadow on all four sides.](https://dev.to/gautham495/know-how-to-apply-box-shadow-on-all-four-sides-43pn)
 
- [Simple CSS Selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44).

- [CSS Pseudo Elements](https://dev.to/gautham495/css-pseudo-elements-for-beginners-53ob).