task-input.jsx

const TaskInput = () => {
  let shouldPerform = useRef(false);
  let [inputValue, setInputValue] = useState('');
  let [perform, taskState] = useTask(function*() {
    yield timeout(1000);

    if (inputValue) {
      return [`good ${inputValue}`, `better ${inputValue}`, `best ${inputValue}`];
    }
    
    return [];
  });
  
  useEffect(() => {
    if (shouldPerform.current) {
      perform();
    }
  }, [inputValue]);

  let handleInputChange = e => {
    shouldPerform.current = true;
    setInputValue(e.target.value);
  };

  return (
    <>
      <input onChange={handleInputChange} value={inputValue} />
      {taskState.lastSuccessful && (
        <ul>
          {taskState.lastSuccessful.result.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      )}
    </>
  );
};