fakeschedulers-react-component.tsx

import * as React from "react";
import { componentFromStream, createEventHandler } from "recompose";
import { from } from "rxjs";
import { debounceTime, distinctUntilChanged, map, startWith } from "rxjs/operators";

export const SomeComponent = () => {
  const { handler, stream } = createEventHandler();
  const SearchingComponent = componentFromStream(props => from(stream).pipe(
    map(event => event.target.value),
    debounceTime(400),
    distinctUntilChanged(),
    startWith(""),
    map(term => !term ? null : (
      <div className="searching">
        <span>Searching for {term}</span>
      </div>
    ))
  );
  return (<>
    <input onChange={handler} type="text"/>
    <SearchingComponent/>
  </>);
};