function SearchableList() {
  const [items] = useState<Item[]>(INITIAL_ITEMS);
  const [query, setQuery] = useState('');
  const [sortBy, setSortBy] = useState<'name' | 'date'>('name');
  const [filterCompleted, setFilterCompleted] = useState(false);

  // Derived list - חישוב מחדש בכל render שרלוונטי
  const filteredAndSorted = items
    .filter(item => {
      if (filterCompleted && item.completed) return false;
      if (query && !item.name.includes(query)) return false;
      return true;
    })
    .sort((a, b) => {
      if (sortBy === 'name') return a.name.localeCompare(b.name);
      return new Date(b.date).getTime() - new Date(a.date).getTime();
    });

  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="חיפוש..."
      />
      <label>
        <input
          type="checkbox"
          checked={filterCompleted}
          onChange={e => setFilterCompleted(e.target.checked)}
        />
        הסתר מושלמים
      </label>
      <select value={sortBy} onChange={e => setSortBy(e.target.value as 'name' | 'date')}>
        <option value="name">מיין לפי שם</option>
        <option value="date">מיין לפי תאריך</option>
      </select>

      {filteredAndSorted.length === 0 ? (
        <p>לא נמצאו תוצאות עבור "{query}"</p>
      ) : (
        <ul>
          {filteredAndSorted.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
Lists ו-Keys — רינדור דינמי נכון

Lists ו-Keys — רינדור דינמי נכון
