🚀 Scaling Client-Side Search: 100,000 Users, Skills, and Real-Time Filtering in React

"use client"
import React, { useState, useTransition } from "react";

const generateUsers = (count: number) => {
  const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", "Helen"];
  const skills = ["React", "Python", "Node.js", "Django", "Rust", "Go", "Flutter", "AWS"];

  return Array.from({ length: count }, (_, i) => ({
    id: i,
    name: `${names[i % names.length]} ${i}`,
    skill: skills[i % skills.length],
  }));
};

const usersData = generateUsers(100000);

export default function BasicMassiveSearch() {
  const [nameQuery, setNameQuery] = useState("");
  const [skillQuery, setSkillQuery] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleNameSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    startTransition(() => setNameQuery(value));
  };

  const handleSkillSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    startTransition(() => setSkillQuery(value));
  };

  const filteredUsers = usersData.filter((user) => {
    const matchesName = user.name.toLowerCase().includes(nameQuery.toLowerCase());
    if (!matchesName) return false;
    if (skillQuery) {
      return user.skill.toLowerCase().includes(skillQuery.toLowerCase());
    }
    return true;
  });

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Simple Skill Search</h1>

      <input
        type="text"
        value={nameQuery}
        onChange={handleNameSearch}
        placeholder="Search by name..."
        className="border p-2 mb-4 block w-full"
      />

      <input
        type="text"
        value={skillQuery}
        onChange={handleSkillSearch}
        disabled={!nameQuery}
        placeholder="Search by skill..."
        className="border p-2 mb-4 block w-full"
      />

      {isPending && <p className="italic text-sm">Filtering...</p>}

      <div className="mt-4">
        {filteredUsers.length === 0 ? (
          <p className="italic text-gray-500">No users found.</p>
        ) : (
          filteredUsers.map((user) => (
            <div key={user.id} className="p-2 border-b">
              <p className="font-bold">{user.name}</p>
              <p className="text-sm text-gray-600">{user.skill}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

"use client"
import React, { useState, useMemo, useTransition } from "react";
import { FixedSizeList as List } from "react-window";

const generateUsers = (count: number) => {
  const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", "Helen"];
  const skills = ["React", "Python", "Node.js", "Django", "Rust", "Go", "Flutter", "AWS"];

  return Array.from({ length: count }, (_, i) => ({
    id: i,
    name: `${names[i % names.length]} ${i}`,
    skill: skills[i % skills.length],
  }));
};

const usersData = generateUsers(100000);

export default function MassiveSkillSearch() {
  const [nameQuery, setNameQuery] = useState("");
  const [skillQuery, setSkillQuery] = useState("");
  const [isPending, startTransition] = useTransition();
  const [searchDuration, setSearchDuration] = useState<number>(0);

  const filteredUsers = useMemo(() => {
    const start = performance.now();

    const lowerName = nameQuery.toLowerCase();
    const lowerSkill = skillQuery.toLowerCase();

    const result = usersData.filter((user) => {
      const matchesName = user.name.toLowerCase().includes(lowerName);
      if (!matchesName) return false;
      if (lowerSkill) {
        return user.skill.toLowerCase().includes(lowerSkill);
      }
      return true;
    });

    const end = performance.now();
    setSearchDuration(end - start);
    return result;
  }, [nameQuery, skillQuery]);

  const handleNameSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    startTransition(() => setNameQuery(value));
  };

  const handleSkillSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    startTransition(() => setSkillQuery(value));
  };

  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
    const user = filteredUsers[index];
    return (
      <div style={style} key={user.id} className="p-3 border-b border-green-100 hover:bg-green-50">
        <p className="font-medium text-gray-800">{user.name}</p>
        <p className="text-sm text-gray-500">{user.skill}</p>
      </div>
    );
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">🧠 Skillset Search (Virtualized)</h1>

      <input
        type="text"
        value={nameQuery}
        onChange={handleNameSearch}
        placeholder="Search by name..."
        className="border p-2 mb-4 block w-full"
      />

      <input
        type="text"
        value={skillQuery}
        onChange={handleSkillSearch}
        disabled={!nameQuery}
        placeholder="Search by skill..."
        className="border p-2 mb-4 block w-full"
      />

      {isPending && <p className="italic text-sm">Filtering...</p>}

      {filteredUsers.length === 0 ? (
        <p className="italic text-gray-500">No users found.</p>
      ) : (
        <List height={500} itemCount={filteredUsers.length} itemSize={70} width="100%">
          {Row}
        </List>
      )}

      <div className="mt-6 text-sm text-gray-600 text-center">
        <p>Total users: {usersData.length}</p>
        <p>Filtered users: {filteredUsers.length}</p>
        <p>Last search took: {searchDuration.toFixed(2)} ms</p>
        <p>{isPending ? "Searching..." : "Idle"}</p>
      </div>
    </div>
  );
}