DEV Community

Cover image for Frontend Dev + Data Structures & Algorithms: How DSA Can Power Your React App ⚡
Jayant Bhawal
Jayant Bhawal

Posted on

Frontend Dev + Data Structures & Algorithms: How DSA Can Power Your React App ⚡

Frontend focused interviews often don’t care about DSA at all.

And for those of us that remember studying DSA at school/college, all the examples felt purely algorithmic (for good reason), but there were hardly any examples or guidance on how the products we use every day leverage this concept.

“Will I ever need this?”
You’ve asked this a lot, haven’t you? 👀

Here are a few data structures that you can leverage in your React app today! 👇

Table of Contents

  1. Introduction
  2. Arrays: Your Go-to in State Management
  3. Objects and Hash Maps: Normalized Data Store for Efficiency
  4. Doubly Linked Lists: Navigation with Context
  5. Stacks: Undo/Redo Functionality with Immutable Behavior
  6. Queues: Managing Sequential API Calls
  7. Trees: Rendering Recursive Components
  8. Graphs: Building Complex Data Relationships and Navigation
  9. Conclusion

Related reading:

1. Arrays 🧩: Your Go-to in State Management

Arrays are everywhere in React. If you need help understanding how .map() or .filter() work, you’re probably seeing this post a little too soon! But don’t worry—once you get comfortable with these array methods, you’ll see how essential they are for rendering lists, managing component states, and transforming data.

2. Objects and Hash Maps 🗺️: Normalized Data Store for Efficiency

In a React app, when you deal with a large collection of entities like users or posts, normalizing your data into objects (hash maps) can make reading and updating much more efficient. Instead of working with a deeply nested structure, you map entities by their IDs.

Example: Reading from a normalized store with IDs



const postsById = {
  1: { id: 1, title: 'First Post', content: 'Content of first post' },
  2: { id: 2, title: 'Second Post', content: 'Content of second post' }
};

const postIds = [1, 2];

function PostList() {
  return (
    <div>
      {postIds.map(id => (
        <Post key={id} post={postsById[id]} />
      ))}
    </div>
  );
}

function Post({ post }) {
  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode

This pattern allows for efficient data access, especially with large datasets where updates or reads need to happen quickly without re-rendering the entire collection.

3. Doubly Linked Lists 🔗: Navigation with Context

Doubly linked lists are useful when you need context from both the previous and next elements—think of navigating a photo gallery where each image displays its neighboring images for reference. Instead of using an index, we'll store the current node directly in the component state.

Example: Doubly linked list for navigation between elements with context



class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      newNode.prev = this.tail;
      this.tail = newNode;
    }
  }
}

const imageList = new DoublyLinkedList();
imageList.add({ id: 1, src: 'image1.jpg', alt: 'First Image' });
imageList.add({ id: 2, src: 'image2.jpg', alt: 'Second Image' });
imageList.add({ id: 3, src: 'image3.jpg', alt: 'Third Image' });

function Gallery() {
  const [currentNode, setCurrentNode] = useState(imageList.head);

  return (
    <div>
      {currentNode.prev && (
        <img src={currentNode.prev.value.src} alt={currentNode.prev.value.alt} className="prev-image" />
      )}
      <img src={currentNode.value.src} alt={currentNode.value.alt} className="main-image" />
      {currentNode.next && (
        <img src={currentNode.next.value.src} alt={currentNode.next.value.alt} className="next-image" />
      )}
      <div>
        <button onClick={() => setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        </button>
        <button onClick={() => setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        </button>
      </div>
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode

In this React component:

  • The current node is stored in the state, and the UI updates based on whether there’s a previous or next node.
  • The buttons enable users to navigate the list both forwards and backwards, and disable if there’s no more nodes to move to.
  • This structure simulates real-time navigation with context from the surrounding elements, commonly used in UI components like carousels, media galleries, or playlists.

4. Stacks 🚀: Undo/Redo Functionality with Immutable Behavior

Stacks allow you to manage undo/redo operations efficiently using Last In, First Out (LIFO) logic. By using immutable operations (concat, slice), we can ensure state remains unmutated.

Example: Undo/Redo with immutable push and pop



const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const [formState, setFormState] = useState({ name: '', email: '' });

const updateForm = (newState) => {
  setUndoStack(prev => prev.concat([formState]));  // Immutable push
  setRedoStack([]);  // Clear redo stack
  setFormState(newState);
};

const undo = () => {
  if (undoStack.length > 0) {
    const lastState = undoStack.at(-1);
    setUndoStack(prev => prev.slice(0, -1));  // Immutable pop
    setRedoStack(prev => prev.concat([formState]));  // Move current state to redo
    setFormState(lastState);
  }
};

const redo = () => {
  if (redoStack.length > 0) {
    const lastRedo = redoStack.at(-1);
    setRedoStack(prev => prev.slice(0, -1));  // Immutable pop
    setUndoStack(prev => prev.concat([formState]));  // Push current state to undo
    setFormState(lastRedo);
  }
};


Enter fullscreen mode Exit fullscreen mode

5. Queues 📬: Managing Sequential API Calls

Queues operate in a First In, First Out (FIFO) manner and are great for ensuring that tasks like API calls or notifications are processed in the correct order.

Example: Queueing API calls



const [apiQueue, setApiQueue] = useState([]);

const enqueueApiCall = (apiCall) => {
  setApiQueue(prevQueue => prevQueue.concat([apiCall]));  // Immutable push
};

const processQueue = () => {
  if (apiQueue.length > 0) {
    const [nextCall, ...restQueue] = apiQueue;
    nextCall().finally(() => setApiQueue(restQueue));  // Immutable pop
  }
};


Enter fullscreen mode Exit fullscreen mode

6. Trees 🌳: Rendering Recursive Components

Trees are commonly used in React when dealing with nested components like comment threads, folder structures, or menus.

Example: Rendering a comment tree recursively



const commentTree = {
  id: 1,
  text: "First comment",
  children: [
    { id: 2, text: "Reply to first comment", children: [] },
    { id: 3, text: "Another reply", children: [{ id: 4, text: "Nested reply" }] }
  ]
};

function Comment({ comment }) {
  return (
    <div>
      <p>{comment.text}</p>
      {comment.children?.map(child => (
        <div style={{ paddingLeft: '20px' }} key={child.id}>
          <Comment comment={child} />
        </div>
      ))}
    </div>
  );
}


Enter fullscreen mode Exit fullscreen mode

Another popular post that might be relevant to you:

7. Graphs 🎯: Building Complex Data Relationships and Navigation

Example 1: Routing between multiple views
You can represent routes between pages as a graph, ensuring flexible navigation paths in an SPA.



const routesGraph = {
  home: ['about', 'contact'],
  about: ['home', 'team'],
  contact: ['home'],
};

function navigate(currentRoute, targetRoute) {
  if (routesGraph[currentRoute].includes(targetRoute)) {
    console.log(`Navigating from ${currentRoute} to ${targetRoute}`);
  } else {
    console.log(`Invalid route from ${currentRoute} to ${targetRoute}`);
  }
}


Enter fullscreen mode Exit fullscreen mode

Example 2: User relationship modeling
Graphs are perfect for modeling social connections or any kind of relationship where multiple entities are interconnected.



const usersGraph = {
  user1: ['user2', 'user3'],
  user2: ['user1', 'user4'],
  user3: ['user1'],
  user4: ['user2']
};

function findConnections(userId) {
  return usersGraph[userId] || [];
}

console.log(findConnections('user1'));  // Outputs: ['user2', 'user3']


Enter fullscreen mode Exit fullscreen mode

Note: We use graphs to show reviewer dependencies in Middleware.

TL;DR — Those School Lessons Pay Off

Those DSA classes might have felt abstract back in the day, but data structures are powering the world around you in React.

Objects, stacks, queues, linked lists, trees, and graphs are more than just theory — they’re the backbone of the clean, efficient, and scalable apps you build every day.

So the next time you manage state in a queue or handle complex UI logic, remember: you’ve been training for this since school. 💪

Let me know which data structures you’ve been using the most!

Top comments (36)

Collapse
 
koolkiyo profile image
あゆみ

Single and doubly linked lists.

Collapse
 
jayantbh profile image
Jayant Bhawal

And treeeees! 🌳

Collapse
 
dhruv_gupta_75ebbe4103299 profile image
Dhruv Gupta

Hello. What do you use singly linked lists for?

Collapse
 
jottyjohn profile image
Jotty John

Good one!

Collapse
 
jayantbh profile image
Jayant Bhawal

Thanks John! :)

Collapse
 
martinbaun profile image
Martin Baun

Reminded me of this quote. “Data dominates. If you've chosen the right data structures and organized things well, the algorithms will almost always be self-evident. Data structures, not algorithms, are central to programming” - Rob Pike

Collapse
 
jayantbh profile image
Jayant Bhawal

Hard agree! ❤️

Collapse
 
anuragband profile image
Anurag Band

Insightful 🦚

Collapse
 
jayantbh profile image
Jayant Bhawal

Glad to hear it 🚀

Collapse
 
jottyjohn profile image
Jotty John

Great article!

Collapse
 
doc_e_ai profile image
Doc-e.ai

nice blog

Collapse
 
jayantbh profile image
Jayant Bhawal

Thank you! :)

Collapse
 
kc900201 profile image
KC

With the popularity of existing, ready-to-use frameworks, I doubt this is highly useful when implementing DSA using class components over the more common function components

Collapse
 
jayantbh profile image
Jayant Bhawal

You don't have to implement DSA using class components. :)
My examples show DSA implementations using classes, but I've personally used these in function components since I've not made class components in... years I think.

Collapse
 
jeffreyschultz profile image
Jeffrey Schultz

Where is this coming from? I don't see any class components mentioned or shown. Also, what's up with the class component hate? There are some types of more advanced components that you have to bend over backwards to implement in functional components, which are magnitudes easier with class components. Use the best tool for the job. Class components are deprecated.

Collapse
 
jayantbh profile image
Jayant Bhawal • Edited

Use the best tool for the job.

Appropriate in every job. :)

Collapse
 
rajgohel profile image
Raj Gohel

Perfect 👍

Collapse
 
jayantbh profile image
Jayant Bhawal

Thanks!

Collapse
 
moniv9 profile image
Mohit Verma

Can also practise questions on PrepareFrontend platform

PrepareFrontend.com

Collapse
 
sraveend profile image
Sreeharsha

This is a a great article!

Collapse
 
mohamed_karim_2dddebb42bd profile image
mohamed karim

Thank for sharing great

Collapse
 
jayantbh profile image
Jayant Bhawal

Thanks! :)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.