React Native
About Lesson

In this React Native lesson we are going to learn about React Native Fetching Data, we want to fetch some data from backend api using class component and also functional component.

 

If you are familiar with the class component there are different life cycle methods for a class component, one of this is componentDidMount, so componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). If you need to load data from a remote endpoint, this is a good place to instantiate the network request, as we want to do the fetching process in here.

 

 

Fetching Data in Class Component

For fetching of the data we are going to use axios library, first of all you need to install axios.

 

 

 

This is our FetchData.js component.

 

 

You can see that in the componentDidMount() method we are going to fetch our data.

 

 

Using this code we can render our data inside React Native Card.

 

 

Also we want to show our data in react native FlatList.

 

 

 

This is our App.js file and we have added our component in here.

 

 

 

Run your application and this is the result.

React Native Fetching Data
React Native Fetching Data

 

 

 

Fetching Data with Functional Component(useEffect Hooks)

Now we want to fetch our data using functional component, for this we are going to use useEffect() Hooks, so if you want to do some side effects inside a functional component than you can use useEffect Hooks.

 

 

This is my EffectHooks.js component.

 

 

 

You can see that we have fetched our data in the useEffect() hooks, also you need to give an empty array dependency, because we want to fetch our data just once.

 

 

 

Also we have added our component in the App.js.

 

 

 

 

Run your application and this is the result.

React Native Fetching Data
React Native Fetching Data

 

Thank you for visiting my website! If you enjoyed the free courses, please consider supporting my works on Patreon.
Exercise Files
No Attachment Found
No Attachment Found