Mastering the Top 5 React Hooks: A Fun Guide for Developers!

user icon
by
Hannah Feehan
pen icon
Coding
date icon
January 21, 2025

React Hooks have completely changed the way we write React applications. Instead of dealing with confusing class components, Hooks let us use state and other features in functional components. They make life easier—but only if you know how to use them well!

If you're diving into React (or just want to level up your skills), understanding the top five Hooks is crucial. So, let’s break them down in a fun and simple way!

1. useState – The MVP of React Hooks

What it does: It lets your component have local state.

Use case: Need to track a counter, form inputs, or a toggle button? This Hook is your go-to!

Strengths:

  • Super easy to use.
  • Perfect for managing simple state changes.
  • Works in any functional component.

Weaknesses:

  • Can become tricky when dealing with complex state logic (in which case, you might want useReducer).

import { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);
 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Increment</button>
   </div>
 );
}

2. useEffect – The Sidekick for Side Effects

What it does: Runs side effects in your components (like fetching data, setting up subscriptions, or manipulating the DOM).

Use case: Want to fetch data when a component mounts? Need to update the document title? useEffect is your buddy!

Strengths:

  • Handles API calls and subscriptions.
  • Can run after every render or only when dependencies change.

Weaknesses:

  • Can cause performance issues if used incorrectly.
  • Requires cleanup to avoid memory leaks (especially with subscriptions).

import { useEffect, useState } from 'react';

function FetchData() {
 const [data, setData] = useState(null);

 useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts/1')
     .then(response => response.json())
     .then(json => setData(json));
 }, []); // Empty array = Runs only on mount

 return <div>{data ? data.title : 'Loading...'}</div>;
}

3. useContext – Your Global State Superpower

What it does: Lets components access shared values without prop drilling.

Use case: Need to share user authentication status, themes, or language settings across components? useContext makes it easy!

Strengths:

  • Eliminates the need for passing props manually through multiple components.
  • Simplifies state management for global data.

Weaknesses:

  • Can lead to unnecessary re-renders if not used properly.

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedComponent() {
 const theme = useContext(ThemeContext);
 return <div>The theme is {theme}</div>;
}

4. useReducer – State Management on Steroids

What it does: An alternative to useState for managing complex state logic.

Use case: Great for handling forms, to-do lists, or any situation where state transitions need structure.

Strengths:

  • Useful for managing state with multiple possible values.
  • Makes state logic more predictable.

Weaknesses:

  • More code than useState, so it’s overkill for simple states.

import { useReducer } from 'react';

const reducer = (state, action) => {
 switch (action.type) {
   case 'increment':
     return { count: state.count + 1 };
   case 'decrement':
     return { count: state.count - 1 };
   default:
     return state;
 }
};

function Counter() {
 const [state, dispatch] = useReducer(reducer, { count: 0 });
 return (
   <div>
     <p>Count: {state.count}</p>
     <button onClick={() => dispatch({ type: 'increment' })}>+</button>
     <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
   </div>
 );
}

5. useRef – The Secret Weapon for DOM Manipulation

What it does: Allows you to reference DOM elements or persist values between renders without causing re-renders.

Use case: Need to focus an input field, store previous state, or access an element directly? useRef is your best bet!

Strengths:

  • Perfect for managing focus, animations, and keeping values between renders.
  • Doesn’t cause re-renders when updated.

Weaknesses:

  • Shouldn’t be used for state that affects rendering.

import { useRef, useEffect } from 'react';

function InputFocus() {
 const inputRef = useRef(null);
 useEffect(() => {
   inputRef.current.focus();
 }, []);
 return <input ref={inputRef} placeholder='Focus on me!' />;
}

Why Learning Hooks is a Game-Changer

Hooks make React development more intuitive and powerful. By mastering these five, you’ll:✅ Write cleaner, more readable code.✅ Reduce unnecessary re-renders and performance issues.✅ Manage state and side effects like a pro.✅ Make your React projects more scalable and maintainable.

So, go ahead and experiment with them in your next project. Once you get the hang of it, you’ll wonder how you ever coded without them! 🚀

blog author image
Hannah Feehan

Designer | Developer | Founder

Passionate about helping others, specialist areas include creative problem solving and education. Mum to three kiddies and two black cats

Connect with a member of Jorvik Web Dev to start a project or find out more info.

Hireus Close Image