diff --git a/src/Async/__story__/story.tsx b/src/Async/__story__/story.tsx
new file mode 100644
index 00000000..36129dcf
--- /dev/null
+++ b/src/Async/__story__/story.tsx
@@ -0,0 +1,18 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Async} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+async function * coroutine1() {
+  yield <p>Loding...</p>;
+
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  yield <div>LOADED</div>;
+}
+
+storiesOf('Util/Async', module)
+  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Async.md')}))
+  .add('Basic example', () => <Async iterator={coroutine1()} />)
diff --git a/src/Async/index.ts b/src/Async/index.ts
new file mode 100644
index 00000000..5d5c4c66
--- /dev/null
+++ b/src/Async/index.ts
@@ -0,0 +1,40 @@
+import {Component} from 'react';
+
+export interface IAsyncProps {
+  iterator;
+}
+
+export interface IAsyncState {
+  child: React.ReactChild;
+}
+
+export class Async extends Component<IAsyncProps, IAsyncState> {
+  state = {
+    child: null,
+  };
+
+  mounted = false;
+
+  componentDidMount () {
+    this.mounted = true;
+    this.iterate();
+  }
+
+  componentWillUnmount () {
+    this.mounted = false;
+  }
+
+  async iterate () {
+    for await (const child of this.props.iterator) {
+      if (!this.mounted) {
+        break;
+      }
+
+      this.setState({child});
+    }
+  }
+
+  render () {
+    return this.state.child;
+  }
+}