React Hooks : Broken Down so Even YOU Can Understand

I thought I knew React, until I had to use it to build enterprise applications. That humbled me real quick.

If this is the first blog post you’re reading, here’s some background: I am a self-taught software developer.

The biggest thing I had to wrap my head around was React hooks. I was used to the common useState and useEffect. But when I opened the codebase and saw useReducer, useContext, useMemo, and even custom hooks—I almost lost it.

Now, if these look a little foreign, don’t worry. I’m here to break them down for you.

What are React hooks?

We need to throw it back a bit to understand them.

Before React 16.8 (2019), there were two types of components: functional components and class components. Class components were the ones where you could use React’s core features (e.g., state and lifecycle methods).

Before:

now:

As you can see, they take the boilerplate code out of managing React core functions. Now onto the different types of React hooks.

UseState

• helps us set an manage a value within a value overtime. Its good especially if a value changes. with useState

• The state value persists for the lifetime of the component instance.

• When the component unmounts, the state is destroyed.

• When you call setState, React schedules a re-render.

🛠️ When to use it:

• When you need to track values that update in response to user actions, API data, or UI events.

• Examples: form inputs, toggles, counters, modal visibility, etc.

UseEffect

Let’s you perform side effects. When I was learning React, I never really understood the term side effects, so let me break it down for you. Think of side effects as tasks that aren’t directly part of rendering JSX for the UI. For example: fetching data, setting up event listeners, or manipulating the DOM.

🛠️ When to use it:

• Fetching API data.

• Listening to window events (scroll, resize, keydown).

• Setting up timers/intervals.

• Running cleanup when a component unmounts. (to avoid memory leakages)

• By default, it runs after every render.

• If you pass a dependency array [dep], it only runs when dep changes.

• If you pass [], it runs once (on mount) and cleans up on unmount.

useMemo

This hook is good for performance optimisation. It works by memoising (caching) an expensive function, so the function isn’t recalculated on every re-render.

Without this hook, every time the parent re-renders, the expensive calculation or component will also be recomputed—even if its dependencies haven’t changed. This wastes processing power and memory, since the component output stays the same.

We use a dependency array to define under what circumstances the memoised function should re-run.

Example:

In the example below, the component renders a very long list. Without useMemo, whenever the parent component (App) re-renders due to the count state changing, the expensive list will also re-render unnecessarily. But with useMemo, the expensive list won’t re-render unless the items (listed in the dependency array) actually change.

useContext

When building applications, you’ll often have state that multiple components need to access. For example, a theme state that determines whether the app is in light or dark mode may need to be shared so components know how to style themselves.

To handle this, we use Context. It allows you to share global state, so props don’t have to be passed down through multiple layers.

If the context value changes, all components that use it will automatically re-render.

The process is straightforward: you create a context, then a context provider, and wrap it around the child component(s) that need access to the state stored in the context.

Whenever you want to access that state, you use the useContext hook to retrieve the value.

UseReducer

The useReducer hook is good for managing complex state. I like to look at it

Practice each one, understand the syntax and when to use them. Trust me, you will get there.

🛠️ When to use it:

• When state has multiple sub-values or complicated update logic.

• Great for forms, shopping carts, or apps with lots of state transitions.

useRef

Creates a mutable reference that doesn’t cause re-renders. Even when updating the .current value, it won’t trigger a re-render. This makes it useful for storing values that you don’t want to cause UI updates.

It can also hold a reference to a DOM element.

🛠️ When to use it:

• Accessing DOM elements (e.g., focusing an input, scrolling to an element).

• Storing values that should survive re-renders but not trigger them (like timers or previous values).

DOM ref example:

If useRef is a dom element, you have access to all these methods:

Mutable value example:

So there you are,

all the knowledge you need to thrive at react hooks and advance your react.

Happy coding!

Ruth