The react component and asynchronous data load handling problem.

The scenario is as follows:

Axios is used to handle api data requests for a respective data service. useState and useEffect methods are implemented in the data service request call. The useState function, however, is constructed in saving an array of data or an object set. The problem is that the component rendering side of the app sees empty data, and so no rendering on the asynchronous call even with useState management!

A solution: useState works great when detecting state changes to Boolean types, strings, and numbers, but for more complex data types, useState isn’t as keen to detecting changes even if the useState variable is rendered, so the quick solution is to implement a useState data type that is instructed on asynchronous call handling to let state management know that the call in data request is completed. This a simple Boolean data type with useState should be sufficient here, and in turn, this should be curly bracket rendered (interpolated). It doesn’t show up visibly on the rendered side either.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store