Write a component that implements a custom debounce function and displays the debounced input value.

Hard

Problem Statement

Sample Input

Hardcoded delay: 500ms

Sample Output

The input value updates only after the user stops typing for 500ms.

Limits

Time: 2s · Memory: 256 MB

Code Editor

00:00

Try your code in this preview. Submit marks it done.

import React, { useState } from "react";
 
 const DebouncedInput = () => {
  return (
  <div>
  <input type="text" placeholder="Type here..." />
  <p>Debounced Value: </p>
  </div>
  );
 };
 
 export default DebouncedInput;

Open Sandbox

Programming Exercises

Write a component that implements a custom debounce function and displays the debounced input value.

Problem Statement

Sample Input

Sample Output

Limits

Hint 1