Gautham Vijayan

Posted on Nov 27, 2020 • Originally published at coding-magnified.tech

React Hooks I use everyday.

#react #beginners #tutorial #webdev

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:


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.

2. useRef


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

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

or with React class component like,

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

3. useEffect

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

UseEffect is similar to compononetDidMount 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 useEffect.

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

4. useDispatch

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 'react-redux' module and is super handy.

Before this we have write mapdispatchtoprops but useDispatch replaced it.

5. useReducer

UseReducer is used when we are dealing with Context API.

6. useSelector

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 mapstatetoprops.

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 custom hook yourself and reuse it in your application as well.

DEV Community