DEV Community

Cover image for React Hooks I use everyday.
Gautham Vijayan
Gautham Vijayan

Posted on • Originally published at coding-magnified.tech

React Hooks I use everyday.

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.

1. useState:


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

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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 .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()
},[])

Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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.

Thank you for reading!!

Check out my portfolio: Gautham's portfolio

Check out my blog: coding-magnified.tech

My Other Articles:

Top comments (0)