DEV Community: Maitrish Mukherjee

Mastering React Data Fetching: A Comprehensive Guide for Developers 🚀

Maitrish Mukherjee — Tue, 28 Nov 2023 08:26:43 +0000

Hey, fellow React devs!

I am hoping this will be yet another all-encompassing article about React data fetching techniques. This will give you a SOLID understanding of data fetching in React.

Trust me, this is the extent of data fetching. Yes, there are a lot of other use-case-specific data fetching that could happen (like fetching paginated data with proper type-casting for a table component, or sequential promises, etc.), but this is the extent. What I mean is there are an infinite number of add-ons that could be used ON TOP of these.

In this comprehensive guide, we'll start from the basics, gradually progressing to advanced techniques, and finally, we'll architect React apps with a focus on separating concerns using React Query. Whether you're just starting or looking to level up your skills, this blog will equip you with the knowledge to architect React applications like a pro.

1. The Fundamentals: Fetch and Axios in useEffect

1.1 Basics with fetch:
Let's kick off with the fundamental approach using the fetch API in a functional component. We'll explore how to fetch data and update the component's state using the useState and useEffect hooks.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        // Render data
      ) : (
        // Render loading state or error message
      )}
    </div>
  );
};

export default BasicFetchExample;

1.2 Axios for Enhanced Functionality:
Building upon the basics, let's explore Axios, a popular HTTP client, to handle data fetching. Axios simplifies error handling and provides additional features like request/response interceptors.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        // Render data
      ) : (
        // Render loading state or error message
      )}
    </div>
  );
};

export default AxiosExample;

2. Advanced Separation of Concerns: Custom Hooks and HOCs

2.1 Custom Hooks for Modularity:
Now, let's introduce the concept of custom hooks. We'll create a reusable data fetching hook, encapsulating the logic for fetching and handling data.

// useDataFetching.js

import { useState, useEffect } from 'react';

const useDataFetching = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useDataFetching;

Now, we can easily use this custom hook in any component:

import React from 'react';
import useDataFetching from './useDataFetching';

const CustomHookExample = () => {
  const { data, loading, error } = useDataFetching('https://api.example.com/data');

  return (
    <div>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {data && (
        // Render data
      )}
    </div>
  );
};

export default CustomHookExample;

2.2 Higher-Order Components (HOCs) for Reusability:
Another powerful technique for separating concerns is using Higher-Order Components. Let's create a data fetching HOC.

// withDataFetching.js

import React from 'react';

const withDataFetching = (url) => (WrappedComponent) => {
  return (props) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
      const fetchData = async () => {
        try {
          const response = await fetch(url);
          const result = await response.json();
          setData(result);
        } catch (error) {
          setError(error.message);
        } finally {
          setLoading(false);
        }
      };

      fetchData();
    }, [url]);

    return <WrappedComponent data={data} loading={loading} error={error} {...props} />;
  };
};

export default withDataFetching;

Now, we can enhance any component with data fetching capabilities:

import React from 'react';
import withDataFetching from './withDataFetching';

const HOCExample = ({ data, loading, error }) => (
  <div>
    {loading && <p>Loading...</p>}
    {error && <p>Error: {error}</p>}
    {data && (
      // Render data
    )}
  </div>
);

export default withDataFetching('https://api.example.com/data')(HOCExample);

3. Architecting React Apps with React Query

3.1 Introducing React Query:
React Query is a powerful library that simplifies data fetching in React apps. It provides a unified and consistent approach to handling API calls with features like caching, automatic refetching, and more.

3.2 Setting Up React Query:
Start by installing React Query:

npm install react-query

Now, let's configure React Query in our app:

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

3.3 Fetching Data with React Query:
Now, let's see how React Query simplifies data fetching in components:

// ReactQueryExample.js

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

const ReactQueryExample = () => {
  const { data, isLoading, isError } = useQuery('fetchData', async () => {
    const response = await fetch('https://api.example.com/data');
    return response.json();
  });

  return (
    <div>
      {isLoading && <p>Loading...</p>}
      {isError && <p>Error fetching data</p>}
      {data && (
        // Render data
      )}
    </div>
  );
};

export default ReactQueryExample;

Architecting React Apps with TypeScript and React Query

1. Setting the Foundation: Installing Dependencies

Before we begin, make sure you have React Query and TypeScript installed in your project:

npm install react-query react-query/devtools typescript @types/react-query

2. Configuration in `index.tsx`

In your index.tsx, set up React Query by creating a QueryClient and wrapping your App component:

// index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

3. Defining TypeScript Types

Create a types.ts file to define TypeScript types that will be used throughout the application:

// types.ts

export type ApiResponse<T> = {
  data: T;
  status: number;
};

export type User = {
  id: number;
  name: string;
  email: string;
};

4. Crafting the Custom Hook for API Calls: `useApi.ts`

Now, let's create a custom hook, useApi, that handles API calls using React Query:

// useApi.ts

import { useQuery, UseQueryOptions } from 'react-query';
import { ApiResponse } from './types';

const BASE_URL = 'https://api.example.com';

const fetchApi = async <T>(path: string): Promise<ApiResponse<T>> => {
  const response = await fetch(`${BASE_URL}${path}`);
  const data = await response.json();

  return { data, status: response.status };
};

export const useApi = <T>(path: string, options?: UseQueryOptions<ApiResponse<T>>) => {
  return useQuery<ApiResponse<T>, Error>(path, () => fetchApi<T>(path), options);
};

5. Using the Custom Hook in Components

Now, let's put our architecture to use by creating two components, UserList and PostList, each using the useApi hook:

// UserList.tsx

import React from 'react';
import { useApi } from './useApi';
import { User } from './types';

const UserList = () => {
  const { data, isLoading, isError } = useApi<User[]>('/users');

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error fetching users</p>;

  return (
    <ul>
      {data?.data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

// PostList.tsx

import React from 'react';
import { useApi } from './useApi';
import { ApiResponse } from './types';

const PostList = () => {
  const { data, isLoading, isError } = useApi<ApiResponse<any>>('/posts');

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error fetching posts</p>;

  return (
    <ul>
      {data?.data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default PostList;

6. Advantages of this Architecture

Let's briefly discuss the advantages of our architecture:

Reusability: The useApi hook promotes code reuse, allowing for consistent and efficient API calls across components.
Consistency: Our architecture ensures a uniform approach to handling API calls with React Query, enhancing code predictability.
Type Safety: TypeScript types provide robust type checking, reducing the likelihood of runtime errors and improving code reliability.
Maintainability: The separation of concerns and modular design enhance code maintainability and readability, crucial for long-term project success.

Conclusion:

You've embarked on a journey from basic data fetching with fetch and Axios to advanced separation of concerns using custom hooks, HOCs, and finally, architecting React apps with React Query. Embrace these techniques, experiment with real-world scenarios, and watch your React applications flourish with maintainability and scalability.

If you think this even gave you an idea about what to expect whether you're starting out in React or even have a few years in your pocket with regards to data-fetching in React, consider liking this article or following for more Frontend tips! Happy coding! 🚀💻

Reach out on Linkedin

Mastering React Performance: In-Depth Guide to useCallback and useMemo. 🚀

Maitrish Mukherjee — Fri, 24 Nov 2023 20:37:11 +0000

Hey fellow devs, I wrote this guide hoping you won't need either another article or YouTube video on useCallback and useMemo after reading this, and you'll always have the high ground ( much like our Obi Wan above lol)

Today, let's dive deep into React performance optimization with a focus on two crucial hooks: useCallback and useMemo.

Understanding useCallback:

The Problem:
Consider a scenario where a Parent component renders a Child component, passing down a function as a prop. Without optimization, every render of the Parent component creates a new function, triggering unnecessary re-renders in the Child component.

// Parent Component
const Parent = () => {
  const handleClick = () => {
    // Some important logic
  };

  return <Child onClick={handleClick} />;
};

// Child Component
const Child = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

The Solution:
Enter useCallback. We memoize the handleClick function to ensure that it's only recreated if the specified dependencies change. This optimization prevents unnecessary re-renders in the Child component, enhancing performance.

import { useCallback } from 'react';

// Parent Component
const Parent = () => {
  const handleClick = useCallback(() => {
    // Some important logic
  }, []); // No dependencies, because handleClick doesn't depend on anything

  return <Child onClick={handleClick} />;
};

By understanding the intricacies of useCallback, you empower yourself to manage functions efficiently, avoiding unnecessary recalculations.

Decoding useMemo:

The Challenge:
Let's consider a component responsible for calculating a Fibonacci sequence. Without optimization, the component recalculates the Fibonacci sequence on every render, leading to redundant computations.

// Fibonacci Component
const Fibonacci = ({ n }) => {
  const calculateFibonacci = () => {
    // Expensive Fibonacci calculation
    return result;
  };

  const result = calculateFibonacci();

  return <div>{result}</div>;
};

The Solution:
Introducing useMemo. We memoize the result of the expensive Fibonacci calculation, ensuring it only recalculates when the specified dependencies change. This optimization prevents unnecessary computations, especially when n remains constant.

import { useMemo } from 'react';

// Fibonacci Component
const Fibonacci = ({ n }) => {
  const result = useMemo(() => {
    // Expensive Fibonacci calculation
    return calculateFibonacci(n);
  }, [n]);

  return <div>{result}</div>;
};

By incorporating useMemo, you gain control over costly computations, making your components more efficient and performant.

When to Use Them Together:

Practical Scenario:
Imagine a list of items with a button to perform an action on each item. We want to optimize the performance of each item, avoiding unnecessary re-renders and computations.

// List Component
const List = ({ items }) => {
  const handleClick = useCallback((item) => {
    // Do something with the item
  }, []);

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} onClick={handleClick} />
      ))}
    </ul>
  );
};

// ListItem Component
const ListItem = ({ item, onClick }) => {
  const result = useMemo(() => {
    // Expensive computation based on item
    return calculateResult(item);
  }, [item]);

  return (
    <li>
      {result}
      <button onClick={() => onClick(item)}>Perform Action</button>
    </li>
  );
};

In this scenario, the combination of useCallback for the click handler and useMemo for the computation result ensures optimal performance for each item in the list.

In Conclusion:

As React professionals, understanding the depth of useCallback and useMemo empowers us to craft high-performance applications. These optimizations, when applied judiciously, elevate your React code to new levels of efficiency. Embrace these tools, and may your React applications run smoother than ever before!

Please comment down below if this helped you!

Generator functions in Javascript ✨

Maitrish Mukherjee — Wed, 22 Nov 2023 05:31:20 +0000

Unraveling the Magic of Generator Functions in JavaScript.

Hey, fellow devs! Ready to add a sprinkle of wizardry to your JavaScript toolkit? Today, let's unlock the enchanting world of Generator Functions – the unsung heroes that can make your code dance.

There's a GREAT video on this, on JsConf as well!

The Power of JS Generators by Anjana Vakil - YouTube

Generators have been around in JavaScript since ES2015, yet remain largely ignored by many JS devs, who don’t see why or how they’d use them in their day-to-...

youtube.com

What's the Buzz about Generators?

Think of generators as your coding choreographers. They're special functions that don't just run and vanish; they pause, step aside, and let you take control. It's like writing a script for your functions – they perform a move, pause, and wait for your cue to continue.

Let's Break It Down for the Newbies:
Generators simplify iteration. No more wrestling with loops; it's more like a friendly chat. Take a look:

function* simpleGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = simpleGenerator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Easy, right? It's like narrating a story to your code, one piece at a time.

Level Up with Asynchronous Sorcery:

*Now, for the seasoned sorcerers among us. Generators can handle the async hustle like a champ. Check this out: *

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  yield data.json();
}

const dataGenerator = fetchData();
dataGenerator.next().value.then(result => console.log(result));

No more callback mayhem – it's a clean, linear flow of async data.

Tailor-Made for Your Industry Quests:

Generators aren't a one-size-fits-all magic wand. They're adaptable. Consider this dynamic industry exploration:

function* dynamicGenerator(data) {
  for (let i = 0; i < data.length; i++) {
    yield data[i];
  }
}

const industryData = ['Frontend', 'Backend', 'DevOps', 'AI'];
const industryIterator = dynamicGenerator(industryData);

for (const role of industryIterator) {
  console.log(`Exploring ${role} opportunities!`);
}

Why Choose Generators for Async?

Imagine you're navigating a labyrinth of asynchronous calls. In a regular JavaScript function, you'd have to dance with callbacks or wrestle with promises. Enter generators – they step in with a calm demeanor.

Generators simplify the async tango. With yield, you gracefully pause, await, and resume without chaining .then() after .then(). It's like having a cup of coffee while your code takes a breather.

async function asyncWorkflow() {
  const step1 = await fetchStep1();
  yield step1;

  const step2 = await fetchStep2();
  yield step2;

  // ... and so on
}

const asyncIterator = asyncWorkflow();
const result1 = await asyncIterator.next().value;
console.log(result1);

const result2 = await asyncIterator.next().value;
console.log(result2);

Generators create a synchronous illusion in an asynchronous world. Your code flows naturally, making it readable and easier to reason about.
Tailor your own journey through data, whether it's frontend realms or the mysteries of AI.

In a Nutshell:

Generator Functions are the unsung conductors of your JavaScript orchestra. They make iteration a breeze, handle async with finesse, and adapt to your coding quests. No need for incantations – just sprinkle a bit of yield magic.

Feel free to share your thoughts and moments in the comments below! Happy coding, wizards! 🚀 #JavaScript #Generators #TechWizardry