DEV Community: Gihan Benaragama

The 5 React hooks every beginner must know

Gihan Benaragama — Tue, 16 Jun 2026 07:44:28 +0000

A hook is just a special function in React that lets you "hook into" React features from inside a regular function component

In this post

useState — remembering things
useEffect — reacting to changes
useContext — sharing data everywhere
useRef — grabbing DOM elements
useMemo & useCallback — staying fast

Hooks were introduced in React 16.8 and completely changed how we write components. Instead of complex class-based components, we now write simple functions and "hook into" React features. Let's go through the five you'll use every single day.

1. useState

Lets your component remember a value — and update the UI when that value changes.

Think of it like a scoreboard. When a player scores, the number on the board updates automatically. useState is your scoreboard — it holds a value, and when it changes, React re-renders the component

// Import the useState Hook from React
import { useState } from 'react'

// Define a functional component named Counter
function Counter() {

  // useState(0):
  // - Creates a state variable called "count"
  // - Creates a function called "setCount" to update "count"
  // - Initializes count with the value 0
  const [count, setCount] = useState(0)

  // Return the JSX (UI) that will be rendered
  return (
    <div>
      {/* Display the current value of count */}
      <p>You clicked {count} times</p>

      {/* 
        When the button is clicked:
        1. Read the current value of count
        2. Add 1 to it
        3. Update the state using setCount()
        4. React re-renders the component with the new value
      */}
      <button onClick={() => setCount(count + 1)}>
        {/* Text shown on the button */}
        Click me
      </button>
    </div>
  )
}

// Export the component so it can be imported into other files
export default Counter

Real-world uses

Form inputs - Keep track of what the user is typing into an email or password field.
Like button - Store the liked state and toggle it — exactly like a Twitter/X heart button.

Key rule: Never modify state directly (e.g. count = count + 1). Always use the setter function (setCount) so React knows to re-render

2. useEffect — reacting to changes

Runs code after your component renders — perfect for fetching data, setting up subscriptions, or talking to the outside world.

Think of it like a notification trigger. When something happens (component loads, a value changes), a side effect kicks in — like fetching fresh data from an API.

// Import the useState and useEffect Hooks from React
import { useState, useEffect } from 'react'

// Define a functional component named WeatherApp
function WeatherApp() {

  // Create a state variable named "weather"
  // Initial value is null because no weather data has been loaded yet
  const [weather, setWeather] = useState(null)

  // useEffect runs after the component renders
  useEffect(() => {

    // Fetch weather data from the API
    fetch('https://api.weather.com/today')

      // Convert the response into JSON format
      .then(res => res.json())

      // Store the fetched data in the weather state
      .then(data => setWeather(data))

  }, []) // Empty dependency array [] means:
          // Run this effect only once when the component first mounts

  // If weather is still null, show a loading message
  if (!weather) {
    return <p>Loading...</p>
  }

  // Once weather data is available, display the temperature
  return (
    <p>It is {weather.temp}°C today</p>
  )
}

// Export the component so it can be used in other files
export default WeatherApp

Avoid infinite loops: If you update state inside useEffect without a dependency array, it will keep running forever. Always add the [] or specific dependencies

3. useContext — sharing data everywhere

Lets any component access shared data — without passing props through every level of the tree
Think of it like a WiFi network. You set up a router (the context provider) once, and any device in range (any child component) can connect and get the internet — without running a cable from device to device

import { createContext, useContext, useState } from 'react'

// Create a Context object (shared data container)
const ThemeContext = createContext()

function App() {
  // State to store the current theme
  const [theme, setTheme] = useState('light')

  return (
    // Provide theme and setTheme to all child components
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Navbar />
      <Page />
    </ThemeContext.Provider>
  )
}

function Navbar() {
  // Consume (read) values from ThemeContext
  const { theme, setTheme } = useContext(ThemeContext)

  return (
    // Toggle between 'light' and 'dark' themes
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle theme: {theme}
    </button>
  )
}

Real-world uses

Dark mode - Share the current theme across every component without passing it as a prop everywhere.
Logged-in user - Once the user logs in, share their name and profile across the entire app.

useRef — grabbing DOM elements

Gives you a direct reference to a DOM element — or stores a value that doesn't trigger a re-render when it changes.

Think of it like a sticky note on a physical object. You stick a label on an input box, and later you can point to it directly — without going through React's re-render cycle.

import { useRef } from 'react'

function SearchBar() {
  // Create a ref object. Initially, current is null.
  const inputRef = useRef(null)

  function handleClick() {
    // Access the actual <input> DOM element and place the cursor inside it
    inputRef.current.focus()
  }

  return (
    <div>
      {/* Attach the ref to the input DOM element */}
      <input ref={inputRef} placeholder="Search..." />

      {/* When clicked, call handleClick to focus the input */}
      <button onClick={handleClick}>Focus search</button>
    </div>
  )
}

Real-world uses

Auto-focus - Focus a login input the moment a modal opens — better UX without re-rendering.
Store a timer ID - Save setTimeout's return value so you can cancel it later — without triggering a re-render.

useState vs useRef: Use useState when changing the value should update the UI. Use useRef when you just need to remember a value or grab a DOM element — no UI update needed.

5. useMemo & useCallback — staying fast

Cache expensive calculations or functions so React doesn't redo them on every render.

Think of it like mental notes. If someone asks you "what's 1247 × 38?" you calculate it once and remember the answer. If they ask again with the same numbers — you just give the answer from memory instead of recalculating

import { useState, useMemo } from 'react'

function ProductList({ products }) {
  // State to store the user's search text
  const [search, setSearch] = useState('')

  // Memoize the filtered list and recalculate it
  // only when products or search changes
  const filtered = useMemo(() => {
    return products.filter(p =>
      p.name.toLowerCase().includes(search.toLowerCase())
    )
  }, [products, search])

  return (
    <div>
      {/* Controlled input: value comes from state and updates state on typing */}
      <input
        value={search}
        onChange={e => setSearch(e.target.value)}
      />

      {/* Render only the filtered products */}
      {filtered.map(p => (
        <p key={p.id}>{p.name}</p>
      ))}
    </div>
  )
}

import { useCallback } from 'react'

function Parent() {
  // Memoize the function and keep the same function reference
  // between renders unless dependencies change
  const handleClick = useCallback(() => {
    console.log('button clicked!')
  }, []) // [] = create the function once and reuse it on every render

  // Pass the memoized function to the child component
  return <ExpensiveButton onClick={handleClick} />
}

useMemo — filtered / sorted lists
Filtering 10,000 products every keypress is expensive. Cache the result until the data or search term changes.
useCallback — stable event handlers
When passing a function to a child component wrapped in React.memo, keep the same reference to prevent unnecessary re-renders.

Don't over-use these. Wrapping everything in useMemo / useCallback adds its own cost. Only use them when you notice actual performance problems — measure first.

Quick reference summary

useState - Store & update UI values
useEffect - Side effects a fter render
useContext - Share data app-wide
useRef - Access DOM elements
useMemo - Cache expensive values
useCallback - Cache functions

Master these five and you'll be able to build almost any React app. The rest of the hooks exist for more specific or advanced scenarios — but these are the foundation. Happy coding! 🚀

Understanding Queue in Data Structures with Real-Life Examples

Gihan Benaragama — Tue, 09 Jun 2026 06:06:30 +0000

Have you ever stood in a line at a supermarket? The person who arrived first gets served first, and newcomers join at the back. That simple idea is exactly what a Queue is in computer science. Let's break it down step by step.

What Is a Queue?

A queue is a linear data structure that follows a simple rule:

First In, First Out (FIFO)

This means the first element added to the queue will be the first one to be removed.

Think of it like a real-world queue at a ticket counter. The first person who joins the line will be served first.

How Does a Queue Work?

A queue has two ends:

Front — where items are removed (think: the front of the checkout line)
Rear — where items are added (think: the back of the line)
You can only add to the rear and remove from the front. You cannot touch items in the middle.

Three Basic Operations

Insert (Enqueue)

Adding a new item to the rear of the queue.
Example: The queue currently holds [15, 27, 39, 23]. When we insert 45, it goes to the rear:

Before: Front → [15, 27, 39, 23] ← Rear
After: Front → [15, 27, 39, 23, 45] ← Rear

Remove (Dequeue)

Taking an item out from the front of the queue.
Example: From [15, 27, 39, 23], removing takes 15 (the front item):

Before: Front → [15, 27, 39, 23] ← Rear
After: Front → [27, 39, 23] ← Rear

PeekFront

Reading the value at the front without removing it. You're just looking, not taking.

Example: PeekFront on [15, 27, 39, 23] returns 15, and the queue stays the same.

Where Are Queues Used in Real Life (in Computers)?

Printer queue — When you send multiple documents to a printer, they line up and print one by one in the order they were sent.
Keyboard input — When you type quickly, each keystroke is stored in a queue so none are lost.
Pipelines — Data flowing through processes in an operating system uses queues to stay ordered.

When Do You Actually Need a Queue in a Project?

Tasks pile up faster than they're processed
A user uploads a video. Encoding takes 2 minutes. You can't make them wait — so you drop the task in a queue and handle it in the background.

You don't want to block the user
Sending a welcome email, generating a PDF, resizing a photo — these are slow. Push them to a queue. The user gets an instant response, the work happens quietly behind the scenes.

Sending notifications at scale
Emails, SMS, push notifications — all go through a queue. You collect them, then deliver them without slowing down your main app.

Implementing a Queue in Java

Let's look at how we actually build a queue in code. We'll use a Java class called QueueX.

Setting Up the Queue

class QueueX {
    private int maxSize;    // maximum number of items the queue can hold
    private int[] queArray; // the actual array storing items
    private int front;      // index of the front item
    private int rear;       // index of the rear item
    private int nItems;     // how many items are currently in the queue

    public QueueX(int s) {  // constructor: called when creating a new queue
        maxSize = s;
        queArray = new int[maxSize];
        front = 0;
        rear = -1;
        nItems = 0;
    }
}

Think of this as setting up an empty line — you reserve space for a certain number of people (maxSize), and right now nobody's in the queue (nItems = 0).

Insert Method

public void insert(int j) {
    if (rear == maxSize - 1)
        System.out.println("Queue is full");
    else {
        queArray[++rear] = j;  // move rear forward, then place the new item
        nItems++;
    }
}

Before inserting, we check if the queue is already full - if (rear == maxSize - 1)

If not, we move the rear pointer forward by one [++rear] and place the new item there.

Remove Method

public int remove() {
    if (nItems == 0) {
        System.out.println("Queue is empty");
        return -99;  // signal that queue was empty
    } else {
        nItems--;
        return queArray[front++];  // return the front item, then move front forward
    }
}

We check if the queue is empty before removing - if (nItems == 0)
If there are items, we return the one at front and move the front pointer forward.

PeekFront Method

public int peekFront() {
    if (nItems == 0) {
        System.out.println("Queue is empty");
        return -99;
    } else {
        return queArray[front];  // look at front item WITHOUT moving the pointer
    }
}

Notice the difference from remove() — here we do NOT do front++. We just look.

Peek - We just print current front value

A Problem: The Queue Gets Stuck!

Think You have a queue with 7 slots (index 0 to 6):

[67, 12, 22, 55, 34, 70, 60] ← full

Front=0, Rear=6

You remove 3 items. Now:

[_, _, _, 55, 34, 70, 60]
Front=3, Rear=6

There are 3 empty slots at the beginning, but rear is already at the last index (6). If you try to insert a new item, the code thinks the queue is full — even though it's not!

The Solution: Circular Queue

A circular queue (also called a ring buffer) fixes this problem by wrapping the rear pointer back to the beginning when it reaches the end.

Think of it as a circular track — when you reach the end, you loop back to the start.

How Insert Changes for a Circular Queue

public void insert(int j) {
    if (nItems == maxSize)
        System.out.println("Queue is full");
    else {
        if (rear == maxSize - 1)
            rear = -1;           // wrap around to the beginning!
        queArray[++rear] = j;
        nItems++;
    }
}

How Remove Changes for a Circular Queue

public int remove() {
    if (nItems == 0) {
        System.out.println("Queue is empty");
        return -99;
    } else {
        int temp = queArray[front++];
        if (front == maxSize)
            front = 0;           // wrap front around too!
        nItems--;
        return temp;
    }
}

Now both front and rear wrap around, so we never waste those empty slots at the beginning!

Putting It All Together: A Full Example

class QueueApp {
    public static void main(String[] args) {
        QueueX theQueue = new QueueX(10); // create a queue that holds 10 items

        theQueue.insert(10);
        theQueue.insert(25);
        theQueue.insert(55);
        theQueue.insert(65);
        theQueue.insert(85);

        while (!theQueue.isEmpty()) {     // keep removing until empty
            int val = theQueue.remove();
            System.out.print(val + " ");
        }
    }
}

Output:10 25 55 65 85

The items come out in exactly the order they went in — that's FIFO in action!

Key Takeaways

A queue is like a real-world line — first come, first served.
You add at the rear and remove at the front.
You can only peek at the front item, not anything in the middle.
A basic linear queue can run into a "false full" problem.
A circular queue solves this by wrapping around the array.

That's it! Queues are one of the most practical data structures in computing, and now you know exactly how they work — from the idea all the way down to the code.

What if the person at the back of the line actually deserves to go first? That's exactly what a Priority Queue solves. See you in the next one!

Stacks — The Simple Data Structure Every Developer Should Know

Gihan Benaragama — Thu, 04 Jun 2026 13:52:16 +0000

What Is a Stack?

A Stack is a linear data structure that follows the Last In, First Out (LIFO) principle.

LIFO last item added to the stack is the first item removed from it.

Think about a stack of plates in a kitchen. When you place a new plate on top, it becomes the first plate you remove later. You cannot easily take a plate from the middle or bottom without removing the plates above it first.

The Stack (the pile of plates)
You start with 4 plates already stacked, bottom to top:

Plate 1 — went in first (bottom)
Plate 2
Plate 3
Plate 4 — went in last (top)

Push — adding a plate

A new blue plate is about to be placed on top. The arrow points downward, meaning it lands on the very top of the pile. You can never add a plate to the middle or bottom — only the top.

Pop — removing a plate

Plate 4 is flying off upward (shown faded on the right). The arrow points upward, meaning it's being removed from the top. Again — you can only take from the top, not the middle or bottom.

The golden rule — LIFO

The label at the bottom says it all:

Last In, First Out

Plate 4 was the last one added → it's the first one removed.
Plate 1 was the first one added → it's the last one removed.

Application of Stacks

• String Reverse
• Page visited history in Web browser.
• Undo sequence of text editor.
• Recursive function calling.

⚙️ Three Core Operations

A stack has just three main things it can do:

1. 🔼 Push — Add an item to the top

Stack before: [ 27, 14, 3, 92, 64 ] ← Top is 27
Push(49)
Stack after: [ 49, 27, 14, 3, 92, 64 ] ← Top is now 49

2. 🔽 Pop — Remove the item from the top

Stack before: [ 49, 27, 14, 3, 92, 64 ] ← Top is 49
Pop() → returns 49
Stack after: [ 27, 14, 3, 92, 64 ] ← Top is now 27

👀 Peek — Look at the top item WITHOUT removing it Stack: [ 49, 27, 14, 3, 92, 64 ] Peek() → returns 49 Stack: [ 49, 27, 14, 3, 92, 64 ] ← Nothing changed!

💻 Let's Build a Stack in Java

Here's a simple Stack class built using an array:

class StackX {
    private int maxSize;        // maximum number of items
    private double[] stackArray; // the array holding items
    private int top;            // index of the top item

    // Constructor — creates an empty stack
    public StackX(int size) {
        maxSize = size;
        stackArray = new double[maxSize];
        top = -1; // -1 means the stack is empty
    }

    // Push — add item to top
    public void push(double item) {
        if (top == maxSize - 1) {
            System.out.println("Stack is full! Can't push.");
        } else {
            stackArray[++top] = item; // increment top, then insert
        }
    }

    // Pop — remove item from top
    public double pop() {
        if (top == -1) {
            System.out.println("Stack is empty!");
            return -99; // error value
        } else {
            return stackArray[top--]; // return item, then decrement top
        }
    }

    // Peek — look at top item without removing
    public double peek() {
        if (top == -1) {
            System.out.println("Stack is empty!");
            return -99;
        } else {
            return stackArray[top]; // just return, don't change top
        }
    }

    // isEmpty — returns true if stack has no items
    public boolean isEmpty() {
        return (top == -1);
    }

    // isFull — returns true if stack has no room left
    public boolean isFull() {
        return (top == maxSize - 1);
    }
}

🧪 Using the Stack

class StackApp {
    public static void main(String[] args) {

        StackX myStack = new StackX(10); // stack with max size 10

        // Push items onto the stack
        myStack.push(30);
        myStack.push(80);
        myStack.push(100);
        myStack.push(25);

        // Pop all items and print them
        while (!myStack.isEmpty()) {
            double val = myStack.pop();
            System.out.print(val + " ");
        }
        // Output: 25.0 100.0 80.0 30.0
    }
}

🧩 Let's Trace Through an Example

🚀 Where Are Stacks Used in Real Programming?

Stacks are everywhere, even if you can't see them:

Function calls — Every time your code calls a function, the computer pushes the return address and arguments onto a stack. When the function finishes, they're popped off.
Recursion — Recursive functions use the call stack behind the scenes. Expression evaluation — Compilers use stacks to evaluate math expressions.
Backtracking algorithms — Think maze solvers or game AI.

📝Here is quick Summary

Stack - A data structure where you can only access the top item
LIFO - Last In, First Out — last added is first removed
Push - Add an item to the top
Pop - Remove the top item
Peek - Read the top item without removing it
isEmpty() - Check if there's nothing in the stack
isFull() - Check if the stack has no room left

If this helped you understand stacks, drop a ❤️ and follow along — next up we'll explore Queues, where the rules are completely different!

Happy coding! 🚀

Linked Lists — The Chain You'll See in Every Interview

Gihan Benaragama — Fri, 29 May 2026 12:45:00 +0000

1. What is a linked list?

A linked list is a chain of nodes, where each node holds a value and the address of the next node.
think of a linked list like a train 🚂

Each train compartment is connected to the next compartment.

Every compartment (node) contains:

Passengers or goods → the data
A connector to the next compartment → the next pointer

Example:

The last compartment is not connected to anything, so it points to null.

Just like you move through train compartments one by one, a linked list is also traversed node by node from the beginning to the end.

Array vs linked list — what's the difference?

Array– each item occupies a particular position and can be directly accessed using an index number.

Linked list – need to follow along the chain of element to find a particular element. A data item cannot be accessed directly.

Why do we even need linked lists?

You already know arrays. So why invent something new?
The problem with arrays is that their size is fixed. When you create an array, you must say upfront how big it is. And inserting or deleting items in the middle means shifting everything else — which is slow.
A linked list solves this. It grows and shrinks freely, and inserting or deleting is fast because you just change a pointer, not shift everything .

Real world examples you already use:

🌐 Browser back/forward — each page you visit is a node. Clicking back just follows the previous pointer
🎵 Music player — each song links to the next and previous song
🖼️ Image viewer — previous and next buttons work because images are linked in a chain

Linked lists are probably the second most commonly used general purpose storage structures after arrays

Operations

Find - Find a link with a specified key value.

Insert - Insert links anywhere in the list.

Delete - Delete a link with the specified value.

Full Java implementation

class Link {
    public int iData;
    public Link next;
    public Link(int id) {
        iData = id;
        next  = null;
    }
    public void displayLink() {
        System.out.println(iData);
    }
}

class LinkList {
    private Link first;   // reference to the first node

    public LinkList() {
        first = null;     // empty list at the start
    }

    // Returns true if the list has no nodes
    public boolean isEmpty() {
        return (first == null);
    }

    // Print every node in the list
    public void displayList() {
        Link current = first;
        while (current != null) {
            current.displayLink();
            current = current.next;  // move to the next node
        }
    }

    // Add a new node at the very beginning
    public void insertFirst(int id) {
        Link newLink  = new Link(id);
        newLink.next  = first;       // new node points to old first
        first         = newLink;     // new node becomes the first
    }

    // Remove and return the first node
    public Link deleteFirst() {
        Link temp = first;           // save reference to return
        first     = first.next;      // second node becomes first
        return temp;
    }
}

create a list, display it, then delete everything:

class myList {
    public static void main(String[] args) {
        LinkList theList = new LinkList();   // create empty list

        theList.insertFirst(23);  // insert four items
        theList.insertFirst(89);  // note: each goes to the FRONT
        theList.insertFirst(12);  // so the order will be reversed
        theList.insertFirst(55);

        theList.displayList();    // prints: 55, 12, 89, 23

        while (!theList.isEmpty()) {
            Link aLink = theList.deleteFirst();
            System.out.print("Deleted: ");
            aLink.displayLink();
        }
    }
}

Here is Bonus tip

Two advanced types: double-ended and doubly linked

Quick summary — what to remember

A linked list is a chain of nodes. Each node holds data and a reference to the next node.
first is the head. The last node's next is null.
You cannot jump to index 5 directly — you must walk from first.
Inserting at the front (insertFirst) is very fast — O(1).
Searching takes O(n) — you check each node one by one.
A doubly linked list lets you go both forward and backward.
Linked lists are the foundation for stacks, queues, and graphs.