translation2.js

const translationFetcher = createFetcher(async (text) => {
  const res = await fetch(`${API_URL}?key=${API_KEY}&text=${text}&lang=en-ru`);
  await new Promise(resolve => setTimeout(resolve, 1000));
  return (await res.json()).text;
});

function Translate(props) {
  if (!props.text) {
    return null;
  }
  return (
    <b>{translationFetcher.read(props.text)}</b>
  );
}

export default class App extends PureComponent {
  state = {
    input: 'hello',
    readyInput: ''
  };
  render() {
    return (
      <>
        <input
          value={this.state.input}
          onChange={e => {
            this.setState({ input: e.target.value });
            this.deferSetState({ readyInput: e.target.value });
          }}
        />
        <br />
        <Placeholder
          delayMs={3000}
          fallback={<b>translating...</b>}
        >
          <Translate text={this.state.readyInput} />
        </Placeholder>
      </>
    );
  }
}