Day 25 Learning In Public

Day 25: Explored the power of React Query and utilized Tanstack to optimize data fetching and state management in React applications. Leveraging Tanstack's robust features, I achieved seamless integration and efficient caching, enhancing performance and scalability. This newfound knowledge equips me to build dynamic and responsive web applications with ease. Excited to implement React Query and Tanstack in future projects for streamlined data management. ????

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

const fetchData = async () => {
  const response = await axios.get('https://api.example.com/data');
  return response.data;
};

const MyComponent = () => {
  const { data, isLoading, isError } = useQuery('myData', fetchData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error fetching data</div>;
  }

  return (
    <div>
      <h1>Data from API:</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;