10 examples of 'componentdidmount async' in JavaScript

68
componentDidMount() {
69
  this._mounted = true;
70
71
  if (!!this.props.autoFetch) {
72
    this.fetch();
73
  }
74
}

11
async componentDidMount() {
12
  const response = await this.getBoard()
13
  this.setState({boardData: response})
14
}

15
async componentWillMount() {
16
  if (!AsyncComponent.Component) {
17
    const Component = await AsyncComponent.loadComponent();
18
    if (this.mounted) {
19
      this.setState({ Component });
20
    }
21
  } else if (!this.state.Component) {
22
    this.setState({ Component: AsyncComponent.Component });
23
  }
24
}

97
value: function componentDidMount() {
98
  var _this2 = this;
99
100
  var _props = this.props;
101
  var location = _props.location;
102
  var store = _props.store;
103
  var routes = this.state.routes;
104
105
  this.unsubscribe = store.subscribe(function () {
106
    var storeState = store.getState();
107
    _this2.setState({ storeState: storeState });
108
  });
109
110
  this.loadAsyncState(routes, location.query, _constants.ROOT_DEPTH);
111
}

21
function getComponentAsync(loader) {
22
  return loadable({
23
    loader: () => loader,
24
    loading: Loading,
25
    timeout: 10000
26
  });
27
}

25
async load({ dataPath, loader, ...props }) {
26
  let { component } = await loader({ dataPath });
27
  if (!component) return;
28
29
  this.setState({
30
    component: component.default,
31
  });
32
}

62
componentDidMount() {
63
  Fire.shared.init();
64
  dispatch.locale.getAsync();
65
}

10
export function asyncComponent(options: {
11
  loader: () => Promise | { default: React.ComponentType }>;
12
}): React.ComponentType {
13
  let LoadedComponent: React.ComponentType;
14
15
  class AsyncComponent extends React.Component {
16
    state: State = {
17
      loading: !LoadedComponent,
18
    };
19
20
    private unmounted = false;
21
22
    componentDidMount() {
23
      if (!this.state.loading) {
24
        return;
25
      }
26
      this.load();
27
    }
28
29
    componentWillUnmount() {
30
      this.unmounted = true;
31
    }
32
33
    async load() {
34
      const Comp = await options.loader();
35
      LoadedComponent = (Comp as any).default ? (Comp as any).default : Comp;
36
      if (!this.unmounted) {
37
        this.setState({ loading: false });
38
      }
39
    }
40
41
    render() {
42
      const { loading } = this.state;
43
      return loading ? null : ;
44
    }
45
  }
46
47
  return AsyncComponent;
48
}

32
function asyncComp<p>(
33
    asyncCallback: (props: P) =&gt; Promise&gt;,
34
    Loader: React.ComponentType = SimpleLoader,
35
    Err: React.ComponentType = () =&gt; <div>
36
) {
37
    return class AsyncComponent extends React.Component&lt;
38
        P,
39
        { Comp: React.ComponentType }
40
    &gt; {
41
        unmount: boolean = false;
42
        constructor(props: P) {
43
            super(props);
44
            this.state = { Comp: Loader };
45
        }
46
        componentWillMount() {
47
            asyncCallback(this.props)
48
                .then(Comp =&gt; {
49
                    if (!this.unmount) {
50
                        this.setState({ Comp });
51
                    }
52
                })
53
                .catch(() =&gt; {
54
                    if (!this.unmount) {
55
                        this.setState({ Comp: Err });
56
                    }
57
                });
58
        }
59
        componentWillUnmount() {
60
            this.unmount = true;
61
        }
62
        render() {
63
            return ;
64
        }
65
    };
66
}</div></p>

6
constructor(props) {
7
	super(props);
8
9
	this.state = {
10
		component: null
11
	};
12
}