1

I am converting React Lifecycles to Hooks. App.js page is loading the first page's data before axios & store configs are run. Because of this, the wrong axios.baseURL is being used in the apis.

I replaced componentWillMount with useEffect, but it runs after the useEffect used on the first loaded page.

APP.JS

const App = () => {
useEffect(() => {
    (async () => await AxiosConfig.init())();
}, []);

useEffect(() => {
    (async () => await Store.init())();
}, []);

return (
    <Provider store={store}>
        <Router>
          <Switch>
            ...
          </Switch>
        </Router>
    </Provider>
);

}

LOADING PAGE

const [data, setData] = useState(null);    

const getData = useCallback(filters => {
    (async () => {
      try {
        let response = await DataService.getAllData(filters);
        if (response && response.status === 200) {
          let data = response.data && response.data.result;
          setData(data);
        }
      } catch (error) {
        ...
      }
    })();
  }, []);

  useEffect(() => getData(filters), [filters, getData]);

<List data={data} />

How do i fix the timing so the config runs first? Do I need to combine the calls in one useEffect, set a flag upon success responses, and only return the App.js DOM if flag = true?

D. Messier
  • 223
  • 1
  • 3
  • 12
  • Take a look at https://stackoverflow.com/a/56818036/4360136. – ViktorG Aug 10 '20 at 18:13
  • Do the `AxiosConfig.init()` and `Store.init()` calls have any dependencies on the UI being mounted? Can they initialized once when instantiated and imported, before react starts trying to render `App`?? – Drew Reese Aug 10 '20 at 18:41
  • Those files don't depend on the UI to be present. they are just config that sets up axios defaults and creates a store. Creating useComponentWillMount seems to work – D. Messier Aug 10 '20 at 18:52
  • I guess why not initialize them *before* react is loading your app, i.e. something like init them and pass them to the `ReactDOM.render` with the provider there? – Drew Reese Aug 10 '20 at 19:16
  • "and pass them to the ReactDOM.render with the provider there" - sorry, I don't understand what you mean by this. do you have a code sample? – D. Messier Aug 14 '20 at 20:43

0 Answers0