Building Search and Filter UI in a React YouTube Clone

Building Search and Filter UI in a React YouTube Clone

Search and filter UI is core to a YouTube clone. Here is how to build it well.

The Search Input

Build a controlled input that holds the query in state. Debounce the search so a request only fires after the user stops typing, avoiding rate limits and unnecessary work.

Fetching Search Results

On debounce, fetch search results from your API, handle loading and error, and render results in a grid. Use stable keys for results so updates are efficient.

The Filter Sidebar

Build a sidebar with category filters. Clicking a filter updates a selected category in state and re-fetches or filters the video list accordingly.

Combining Search and Filter

Combine the query and selected filter to fetch the right results. Both are state values, and the fetch depends on both, so include both in the useEffect dependency array.

Deriving Filters From Data

For simple filters, derive the filtered list during render from the full list and the selected filter, instead of refetching. Only refetch when the API actually needs to know the filter.

Suggestion Dropdown

Add a suggestion dropdown that appears as the user types, showing query suggestions from the API. Handle keyboard navigation with up and down arrows and selection on Enter.

Empty and No-Results States

Show a clear empty state when there are no results, and a clear message during loading. Users should always know what is happening, never see a blank screen.

The Takeaway

Build search with a debounced controlled input, fetch and render results with loading and error states, add a filter sidebar, combine query and filter in the dependency array, derive simple filters during render, and handle empty and no-results states.