DEV Community 👩‍💻👨‍💻

Cover image for React Hooks Mini Crash Course
Chris Achard
Chris Achard

Posted on • Originally published at

React Hooks Mini Crash Course

This was originally posted as a Twitter thread:

Want to learn hooks, but you've been too busy? ⏲

🔥 Here's a mini crash course just for you! 🔥

(code links at the end)


Add state to function components by calling useState and pass in the initial value.

useState in function components


useState returns 2 values in an array:

  1. the current value of the state
  2. a function to update the state



Call hooks at the top level of a function, and NOT in if statements or loops.

This is required for React to internally keep track of the hook values.

call hooks at the top level


Perform asynchronous actions and actions with side effects in the useEffect hook

That way, async actions still work across multiple renders



useEffect takes an array of dependencies as the second argument

THIS IS IMPORTANT! Skipping the dependency list can result in infinite loops, or code that doesn't run when you think it should

useEffect dependencies


Write custom hooks as function that start with the word use

Then use any built in hooks you want

and return (or not) and values and functions

Custom Hooks


There are many other built in hooks, but they all follow similar patterns

Get the complete list here:


That's it! You can now add state and long-running effects to function components.

Class components aren't dead, but hooks do help clean up some component logic.


Here are links to code you can try out!



Custom Hooks


Like this post?
You can find more by:

Thanks for reading!

Top comments (10)

itsmenatalie profile image

This is what I needed this whole time! Easy, clean and descriptive! Thank you mate! 😍

chrisachard profile image
Chris Achard Author

You're welcome!

simbo1905 profile image
Simon Massey • Edited on

Do react hooks make it easier to use the mvvm design pattern?

chrisachard profile image
Chris Achard Author

Not necessarily easier - hooks are mostly a way to provide functionality to function components (instead of class components), and then they let you re-order and organize how to handle things like effects. So it's not like they allow you to do anything new necessarily - but they just let you organize and respond to your data and effects in a new way.

landerson352 profile image
Lincoln Anderson

This article may be helpful:

Ignoring the bits about RXJS specifically, the "facade" approach of putting all your "view-model" logic into a custom hook and then pulling the VM hook into the components you need, is pretty great. Previously this would be done with the container/pure-component model and/or higher-order-components (HoCs), which have their own pitfalls and boilerplate to deal with.

So while hooks don't give you any groundbreaking new MVVM architecture out of the box, I do think they make it easier and cleaner to implement.

chrisachard profile image
Chris Achard Author

Thanks for the link! I'll check it out

lmolivera profile image
Lucas Olivera

I've been trying to understand Hooks for a while and this post basically explained me how to use them. Thank you very much, it is a very well written article!

chrisachard profile image
Chris Achard Author

Thanks! I really like the format as well: Hopefully I'll do more! I like the "mini crash course" idea, plus it fits well for both twitter and for here.

Glad it was helpful!

s_aitchison profile image
Suzanne Aitchison

Thanks for this - it's the perfect overview I needed!

chrisachard profile image
Chris Achard Author

Glad it helped!

👀 Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.