import React, { useState, useMemo, useCallback } from 'react';
import './styles.css';

// 💡 Imagina que esta lista viene de una API pesada
const slowItems = Array.from({ length: 500 }, (_, i) => "Item " + i);

// 1. Crea aquí el componente ListItem y envuélvelo en React.memo

export default function App() {
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState(null);

  // 2. Optimiza este filtrado con useMemo
  const filtered = slowItems.filter(item => 
    item.toLowerCase().includes(search.toLowerCase())
  );

  // 3. Crea una función handleSelect con useCallback
  const handleSelect = (item) => {
    setSelected(item);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Lista de Alto Rendimiento</h1>
      <p>Seleccionado: {selected || 'Ninguno'}</p>
      
      <input 
        type="text" 
        placeholder="Escribe rápido para probar el lag..." 
        value={search} 
        onChange={e => setSearch(e.target.value)} 
      />

      <ul>
        {filtered.map(item => (
          <li key={item}>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
}
Terminal
Ready

Waiting for execution...