useEffect-with-setTimeout

useEffect-with-setTimeout.jsx

import React, { useEffect } from 'react';
import { useImmer } from 'use-immer';

export default function Input() {
  const [state, setState] = useImmer({
    name: '',
  });

  const handleNameChange = (e) => {
    setState((draft) => {
      draft.name = e.target.value;
    });
  };

  useEffect(() => {
    if (!state.name) return;

    const timeout = setTimeout(() => {
      console.log('async operation...');
    }, 2000);

    return () => {
      clearTimeout(timeout);
    };
  }, [state.name]);

  return (
    <>
      <label htmlFor="name">Name:</label>
      <input
        value={state.name}
        onChange={handleNameChange}
        type="text"
        id="name"
      />
    </>
  );
}