Best possible ways to fetch data in React

When it comes to getting the data from the API in react js application, there are several approaches you can consider.

When fetching data from an API endpoint ("https://www.muhammadrizwan.me/api/get-allblogs") in a React application to retrieve all the blogs, you need to send a request. To simplify and handle this request asynchronously, there are built-in and popular third-party libraries available.

There are several libraries, both built-in and third-party, that facilitate data retrieval in a React application. These libraries offer convenient and efficient ways to handle asynchronous requests and enhance the overall development experience.

Here are some best possible ways:

1. Fetch Method:

This method use used to send the request to a server and get the data, either in JSON or XML format, it depends on the server configuration.
This method returns a PROMISE.
and remember this is the default API that comes with the React Js library you don't even have to install the library for that.

If you are not aware of PROMISE, I would suggest you get familiar with the promise in javascript first.

function App()
{
  useEffect(()=> {
  
  fetch('https://www.muhammadrizwan.me/api/get-allblogs')
  .then(response => response.json())
  .then(json => consloe.log(json));
  
  },[]);
  return (<>get the data using built in fetch Method </>);
};

2. Async -Await

It is one of the preferred ways to fetch the data from the API server because it enables us to get the data asynchronously and without using .then() extra method.
In the async block, we use await function to wait for the promise to return the result just like in any other programming language, e.g., (C#).

function App()
{
  useEffect(()=> {
 	(async () => {
    	try {
        const response =await axios.get("https://www.muhammadrizwan.me/api/get-allblogs");
        console.log(response.data);
        	}
        catch(error){
        console.log(error);
        }
    })();
  },[]);
  return (<>Fetch the data using async await Method </>);
};

In this example we used axios.get() function to get data from API. In the next method, I will explain this library more in detail.

3. AXIOS library

Axios on of the most popular third-party library that most React developers use these days because of its efficiency and simplicity.
With axios you can you can easily send the asynchronous request to API to fetch the data, create, update, and delete the records.
Let's see its implementation using a simple example.

import axios from 'axios';
function App()
{
  useEffect(()=> {
  
    axios.get('https://www.muhammadrizwan.me/api/get-allblogs')
    .then((response) => consloe.log(response.data));
  },[]);
  
  return (<>Fetch the data using AXIOS library </>);
};

there are other methods available under this library like.
axios.post
axios.put
axios.delete

4. React Query library

It's another popular library for big enterprise applications where you need to cache the result for a specific time and store some of the data for further requests.
With this library we can do more than just fetch the data by using caching and prefetching can impact the overall user experience by preventing the ir-regulations and making the application feels like must faster. However, we require some extra configuration for that.
Let's see its implementation using this example

import axios from 'axios';
import {useQuery} from 'react-query';

function App()
{
  const {isLoading,error,data}= useQuery('posts',() => axios(''))

  console.log(data);

return <> Fetch the data using react query library  </>
};	

Conclusion:

In conclusion, the choice of the method for fetching data in a React application depends on the specific scenario at hand. If you do not have the need or the flexibility to install new libraries, you can utilize the built-in functions available in React.

However, in the case of larger applications or when dealing with scenarios such as caching records or retrieving a significant amount of data in a single request, using specialized libraries becomes beneficial. These libraries provide features that optimize performance, enhance caching capabilities, and improve the overall user experience on the client side.

When making a decision, it is important not to overthink the selection process. Evaluate your requirements and choose the relevant method that best meets your specific needs. Avoid installing unnecessary libraries for different requests to adhere to the principle of "Don't Repeat Yourself" (DRY) in software development.

Support Me

Join me on Codementor for more helpful tips. Make sure to like and Follow to stay in the loop with my latest articles on different topics including programming tips & tricks, tools, Framework, Latest Technologies updates.

Please support me on PATREON on below link.

Support me on Patreon

Thank you very much for supporting me.
I would love to see you in the followers list on code mentor.

Stay tuned and stay updated!