Still Learning React Hooks

React Hooks For Beginners

Hooks let you extract component logic into reusable functions. They’re like the Swiss Army Knife of common class-based React logic for your functional components.

Ghost Together
22 min readJun 22, 2021

--

Check out these coding book discounts for Medium readers:

Follow me on Twitter 101K where I post all things JavaScript

Side Note: Always look through official docs first. In this article I cover my own experience with React Hooks. But I know someone on a similar path.

So why this tutorial then? Many hooks tutorials (including official docs) show syntax and how hooks work. But they don’t mention setbacks you’re 100% guaranteed to run into. You know, that moment when you start running into errors even though you are following documentation to a tee!

For example useState({}) hook doesn’t merge state automatically.

(When it’s used with arrays and objects.)

I wrote this React Hooks tutorial when I was still learning them myself. I documented common quirks and pitfalls you’ll run into and how to solve them. Hopefully this will help any new React learners avoid them.

If you want to support my work please check out my JavaScript and CSS books. I’m not Random House and don’t make a lot of $ but it does help me write more free tutorials! As an independent publisher this is helpful.

But first…let’s explore some basics.

Few Things About React Hooks

If you’ve never had any previous experience with React Hooks useState() and useEffect() are the two hooks you want to learn first.

In this React Hooks tutorial we’ll explore them before diving into other, more complex hooks, like useContext(), useRef() and useReducer()

Hooks Covered In This Tutorial

  1. useState() imitate class-based state in function components.
  2. useEffect() imitate multiple lifecycle methods with just 1 function.
  3. useContext() with </Context.Provider> and </Context.Consumer>
  4. useMemo() helps cache functions and components

--

--

Ghost Together

Ghost Together @ https://semicolon.dev is an alternative to Twitter. Sign up to meet other makers of things.