Search Filter
Given a static list of items, build a search input that filters the list in real-time as the user types. No API calls, no debounce — purely synchronous filtering of an in-memory array.
Requirements
- Display a list of 20 items (frameworks, libraries, etc.)
- A search input filters the list as you type (case-insensitive)
- Show a "X of Y items" count below the input
- Show an empty state when no items match
- A clear (✕) button resets the query
- No debounce needed — synchronous filter is fine for small lists
Key Patterns
useState for query stringArray.filter() + String.includes()toLowerCase() for case-insensitive matchDerived filtered array (not in state)Controlled input
Important
Interview Tip
Never put the filtered array in state — derive it inline: const filtered = items.filter(i => i.toLowerCase().includes(query.toLowerCase())). State holds only the query string. The filtered list recalculates on every render, which is fine for small arrays. For large datasets, useMemo would help.
Showing 20 of 20 items
- React
- Vue
- Angular
- Svelte
- Solid
- Next.js
- Nuxt
- Remix
- Astro
- Vite
- TypeScript
- JavaScript
- Node.js
- Deno
- Bun
- Tailwind CSS
- MUI
- Chakra UI
- Ant Design
- Bootstrap