1. Arrays

Arrays are the most common data structure in JavaScript and React applications.

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text }]);
  };

  return (
    <ul>
      {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
    </ul>
  );
}

Arrays are great for ordered lists of items, especially when you need to render them in a specific order.

2. Hash Tables (Objects in JavaScript)

Hash tables are excellent for quick lookups and are often used for caching or memoization.

function UserProfile({ userId }) {
  const [userCache, setUserCache] = useState({});

  useEffect(() => {
    if (!userCache[userId]) {
      fetchUser(userId).then(user => {
        setUserCache(prev => ({ ...prev, [userId]: user }));
      });
    }
  }, [userId]);

  return <div>{userCache[userId]?.name || 'Loading...'}</div>;
}

This example uses an object as a hash table to cache user data, reducing API calls.

3. Singly Linked Lists

While not native to JavaScript, we can implement a singly linked list for scenarios where we need efficient insertions and deletions at the beginning of a list.

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

function LinkedListComponent() {
  const [head, setHead] = useState(null);

  const addToFront = (value) => {
    const newNode = new Node(value);
    newNode.next = head;
    setHead(newNode);
  };

  const renderList = () => {
    let current = head;
    const elements = [];
    while (current) {
      elements.push(<span key={current.value}>{current.value} -> </span>);
      current = current.next;
    }
    return elements;
  };

  return (
    <div>
      <button onClick={() => addToFront(Math.random())}>Add Node</button>
      <div>{renderList()}</div>
    </div>
  );
}

4. Doubly Linked Lists

Doubly linked lists are useful when you need to traverse in both directions, such as in a photo gallery.

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

function PhotoGallery() {
  const [current, setCurrent] = useState(null);

  useEffect(() => {
    // Initialize the gallery
    const img1 = new Node('image1.jpg');
    const img2 = new Node('image2.jpg');
    const img3 = new Node('image3.jpg');
    
    img1.next = img2;
    img2.prev = img1;
    img2.next = img3;
    img3.prev = img2;

    setCurrent(img1);
  }, []);

  const nextImage = () => setCurrent(current.next || current);
  const prevImage = () => setCurrent(current.prev || current);

  return (
    <div>
      <img src={current?.value} alt="Gallery" />
      <button onClick={prevImage}>Previous</button>
      <button onClick={nextImage}>Next</button>
    </div>
  );
}

5. Queues

Queues are perfect for managing asynchronous tasks or animations in order.

function NotificationCenter() {
  const [queue, setQueue] = useState([]);

  const addNotification = (message) => {
    setQueue(prev => [...prev, message]);
  };

  const removeNotification = () => {
    setQueue(prev => prev.slice(1));
  };

  useEffect(() => {
    if (queue.length > 0) {
      const timer = setTimeout(removeNotification, 3000);
      return () => clearTimeout(timer);
    }
  }, [queue]);

  return (
    <div>
      {queue[0] && <div className="notification">{queue[0]}</div>}
      <button onClick={() => addNotification('New message!')}>Notify</button>
    </div>
  );
}

6. Stacks

Stacks are useful for managing undo/redo functionality or for parsing expressions.

function UndoableCounter() {
  const [currentValue, setCurrentValue] = useState(0);
  const [history, setHistory] = useState([]);

  const increment = () => {
    setHistory(prev => [...prev, currentValue]);
    setCurrentValue(prev => prev + 1);
  };

  const undo = () => {
    if (history.length > 0) {
      const prevValue = history[history.length - 1];
      setCurrentValue(prevValue);
      setHistory(prev => prev.slice(0, -1));
    }
  };

  return (
    <div>
      <p>Count: {currentValue}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={undo} disabled={history.length === 0}>Undo</button>
    </div>
  );
}

7. Trees (BST example)

Trees are excellent for representing hierarchical data, like file systems or comments threads.

class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

function BinarySearchTree() {
  const [root, setRoot] = useState(null);

  const insert = (value) => {
    const insertNode = (node, newValue) => {
      if (newValue < node.value) {
        if (node.left === null) {
          node.left = new TreeNode(newValue);
        } else {
          insertNode(node.left, newValue);
        }
      } else {
        if (node.right === null) {
          node.right = new TreeNode(newValue);
        } else {
          insertNode(node.right, newValue);
        }
      }
    };

    if (root === null) {
      setRoot(new TreeNode(value));
    } else {
      insertNode(root, value);
    }
  };

  const inOrderTraversal = (node, result = []) => {
    if (node !== null) {
      inOrderTraversal(node.left, result);
      result.push(node.value);
      inOrderTraversal(node.right, result);
    }
    return result;
  };

  return (
    <div>
      <button onClick={() => insert(Math.floor(Math.random() * 100))}>
        Insert Random Number
      </button>
      <div>In-order traversal: {inOrderTraversal(root).join(', ')}</div>
    </div>
  );
}

8. Tries

Tries are efficient for prefix-based operations, like autocomplete features.

class TrieNode {
  constructor() {
    this.children = {};
    this.isEndOfWord = false;
  }
}

function Autocomplete() {
  const [trie, setTrie] = useState(new TrieNode());
  const [input, setInput] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const insert = (word) => {
    let node = trie;
    for (let char of word) {
      if (!node.children[char]) {
        node.children[char] = new TrieNode();
      }
      node = node.children[char];
    }
    node.isEndOfWord = true;
  };

  const findAllWords = (node, prefix, result) => {
    if (node.isEndOfWord) {
      result.push(prefix);
    }
    for (let char in node.children) {
      findAllWords(node.children[char], prefix + char, result);
    }
  };

  const getSuggestions = (prefix) => {
    let node = trie;
    for (let char of prefix) {
      if (!node.children[char]) {
        return [];
      }
      node = node.children[char];
    }
    const results = [];
    findAllWords(node, prefix, results);
    return results;
  };

  useEffect(() => {
    // Initialize trie with some words
    ['apple', 'application', 'append', 'banana', 'ball'].forEach(insert);
  }, []);

  useEffect(() => {
    setSuggestions(getSuggestions(input));
  }, [input]);

  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
        placeholder="Type to search" 
      />
      <ul>
        {suggestions.map(word => <li key={word}>{word}</li>)}
      </ul>
    </div>
  );
}

9. Graphs

Graphs are useful for representing complex relationships, like social networks or navigation systems.

function SocialNetwork() {
  const [graph, setGraph] = useState(new Map());
  const [selectedUser, setSelectedUser] = useState(null);

  const addUser = (name) => {
    setGraph(new Map(graph.set(name, [])));
  };

  const addFriendship = (user1, user2) => {
    setGraph(new Map(graph)
      .set(user1, [...(graph.get(user1) || []), user2])
      .set(user2, [...(graph.get(user2) || []), user1])
    );
  };

  const getFriends = (user) => graph.get(user) || [];

  return (
    <div>
      <button onClick={() => addUser(`User${graph.size + 1}`)}>Add User</button>
      <select onChange={(e) => setSelectedUser(e.target.value)}>
        <option value="">Select a user</option>
        {Array.from(graph.keys()).map(user => (
          <option key={user} value={user}>{user}</option>
        ))}
      </select>
      {selectedUser && (
        <div>
          <h3>Friends of {selectedUser}:</h3>
          <ul>
            {getFriends(selectedUser).map(friend => (
              <li key={friend}>{friend}</li>
            ))}
          </ul>
          <button onClick={() => addFriendship(selectedUser, `User${Math.floor(Math.random() * graph.size) + 1}`)}>
            Add Random Friend
          </button>
        </div>
      )}
    </div>
  );
}

Conclusion

Understanding and effectively using these data structures can significantly improve your React applications' performance and organization. Each structure has its strengths and ideal use cases:

Arrays for ordered lists
Hash Tables for quick lookups
Linked Lists for efficient insertions and deletions
Queues and Stacks for managing ordered operations
Trees for hierarchical data
Tries for prefix-based operations
Graphs for complex relationships

Remember, the key is to choose the right data structure for your specific needs. By mastering these structures, you'll be able to write more efficient and scalable React applications.

Here are the courses I'm currently studying for data structures and algorithms: