Ever built a dropdown that lags every time you type a letter because it fires too many API requests? We are going to fix that by building a searchable dropdown with a debounce feature, containerizing it, and pushing it live.

  • Write a React searchable dropdown with input debouncing.
  • Create a production-ready Dockerfile for a React application.
  • Set up automated CI/CD to deploy your app directly to Render.
  • Avoid common performance and deployment pitfalls.

Building the Searchable Dropdown Component

First, we need a React component that waits for the user to stop typing before running a search. This waiting period is called debounce, which stops your app from spamming your server with requests on every single keystroke.

Here is the complete, working React component using a custom debounce hook pattern:

import { useState, useEffect } from 'react';

export default function SearchableDropdown({ items, onSearch }) {
  const [query, setQuery] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => {
      onSearch(query);
    }, 300); // Wait 300ms after user stops typing

    return () => clearTimeout(timer);
  }, [query, onSearch]);

  return (
    
       setQuery(e.target.value)}
      />
    
  );
}

The key takeaway is the clearTimeout function inside the cleanup return, which clears the previous timer every time the user types a new letter.

Containerizing with Docker

Next, we need to package our React app into a Docker container so it runs reliably anywhere. A container is simply a lightweight, standalone package of your software that includes everything needed to run it.

Create a file named Dockerfile in your project root with the following multi-stage build instructions:

# Stage 1: Build the app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2: Serve the app with Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Multi-stage builds keep your final Docker image tiny by dropping all the heavy build tools and keeping only the compiled HTML and CSS files served by Nginx.

Render development Photo by Growtika on Unsplash

Deploying to Render

Render is a cloud hosting platform that lets you deploy web apps easily without managing complex servers. Push your code to GitHub, connect your repository to Render as a new Web Service, and select Docker as your environment.

Render will automatically read your Dockerfile, build the image, and give you a live URL for your dropdown app. Every time you push a git commit to your main branch, Render will automatically rebuild and redeploy your app.

Common mistakes

A common mistake when building search dropdowns is forgetting to handle loading states while the debounced search is processing, leaving the user staring at a frozen screen. Another frequent Docker error is forgetting to configure Nginx to handle client-side routing, which causes 404 errors if a user refreshes on a sub-route.

Clone the starter repository on GitHub today and try adding keyboard arrow-key navigation to your new dropdown component.