React Hooks 101

Vannida Lim
Aug 4, 2020 · 4 min read

A quick reference to commonly used hooks

I had a fun coding challenge recently where I had to build out a feature with React. It was definitely a nice change from a typical algorithmic coding challenge. The deliverable stated that I could only use functional components. But wait! I thought functional components couldn’t hold state. Incoming React hooks!

Photo by Zyanya BMO on Unsplash

What are Hooks?

Config

Commonly Used Hooks

Some basic rules to know when using hooks are to:

  1. Don’t use hooks inside vanilla JavaScript functions.
  2. Use hooks at the top-level — meaning, don’t use them in loops, conditions, or nested functions. This is because is it possible to use many hooks in one component and the order of them matters. So we want to be able to preserve state correctly.

useState() — initialize, reference, or update state

In the gist below, we can compare how state would be handled in a functional and class component. One benefit of useState is that only one line of code is necessary to do what lines 5 to 7 is doing.

useEffect() — similar to lifecycle methods like componentDidMount() or componentDidUpdate()

  1. Initially renders
  2. Initially renders and also whenever it re-renders
  3. Initially renders, whenever it re-renders as well as when data is changed

Another way to think about those three scenarios is if you want to use useEffect with or without cleanup — meaning, do you want to express any side effects like running additional code after the initial render? If you decide to use useEffect to handle some cleanup, you can return a callback function to be invoked on the next render. One example use case would be to return cleanup function in order to cancel the timer on setTimeout. On the first render, the setTimeout function would run as normal, then on the second render, it will get canceled. Pretty neat stuff!

useEffect can take a second argument of three things: nothing, an empty array, and an array with elements. It’s more than likely that you’ll either use a second arg of an array — filled or not. The second argument will run at the initial render. If there is filled array as a second arg, useEffect will run again if the data has since been changed.

In the gist below, state is initially set to an empty array on line 3 with setState. On line 5, we use useEffect to fetch natively by adding an async/await function. You can of course use other libraries like axios to handle fetching. One thing to note is that the useEffect function itself cannot be async, which is why, below, the async keyword is used in data() instead. As a second argument, we pass in the array with the results which holds the data/state we’ve fetched and set with setResults().

One of the cool things functional components can do is hold multiple useState and useEffect functions. Depending on those three scenarios listed above, you can use as many hooks as needed.

Hooks are a more modern way to write React and offer so much more functionality to functional components. They are definitely worth learning and can really transform and optimize your React apps.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Vannida Lim

Written by

//Flatiron School Alum && Software Engineer ⚛👩🏻‍💻

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Vannida Lim

Written by

//Flatiron School Alum && Software Engineer ⚛👩🏻‍💻

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic.

Get the Medium app