Is learning useEffect() becoming less crucial for data fetching in React? Should newcomers prioritise learning React Query over useEffect()?

Question

I've been working on a React component to fetch data from the GitHub API using useEffect.

UPDATE

There is loading, error and data handled all declared with the help of useState() and then rendering the content as per the response from the API.

My instructor mentioned that we would not need useEffect() any longer (after almost spending 14 lectures on useEffect - which is a good amount of time for new learners) as it is being replaced by React Query (which the instructor will teach in many sections). This has made me curious about the future of useEffect in modern React development.

My Questions:

1. Is useEffect becoming less relevant for data fetching with the rise of React Query?

2. What does React Query bring to the table that useEffect cannot? I learned that React Query is more useful on remote data handling where a FE React application need not store the data in the component but directly the data updates happen on the server.

3. Are there scenarios where useEffect is still preferred or necessary despite the capabilities of React Query?

4. How do you decide between using useEffect and React Query in your projects?

5. Considering the learning curve associated with useEffect, should new learners avoid learning useEffect() and start directly with React Query instead? similar to the way we stopped learning class based components after React-16 & instead focused on Functional components to save time and efforts.

I understand that useEffect is a general-purpose hook used for various side effects beyond data fetching, such as subscriptions, manual DOM manipulations, and more. However, I'm particularly interested in how its usage for data fetching is evolving with tools like React Query.

I appreciate any guidance on how to best leverage these tools in modern React development.

Here is my current implementation with useEffect()

import { useEffect, useState } from "react";
const url = "https://api.github.com/users/emmeiwhite";

const MultipleReturnsFetchData = () => {
  /** In this challenge, I want to get the github user from an API */
  const [isLoading, setIsLoading] = useState(true);
  const [person, setPerson] = useState(null);
  const [error, setError] = useState(false);

  const fetchUser = async () => {
    try {
      const response = await fetch(url);

      // fetch gocha!
      if (!response.ok) {
        setError(true);
        setIsLoading(false);
        return;
        // we simply return in this case and our error state is true which will output the if(error) condition in the browser!
      }
      const user = await response.json();
      console.log(user);
      setPerson(user);
      setIsLoading(false);
    } catch (e) {
      setError(true);
      setIsLoading(false);
      console.log(error);
    }
  };

  useEffect(() => {
    fetchUser();
  }, []);

  /** Order matters here:
 * First comes loading, then error and only then the normal JSX return from the component
   */

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

  if (error) {
    return <h1>There was an error ...</h1>;
  }

  const styles = {
    width: "150px",
    borderRadius: "100%",
  };

  return (
    <article>
      <img
        src={person.avatar_url}
        alt={person.login}
        style={styles}
      />
      <h1>{person.name}</h1>
      <h3>Works at {person.company}</h3>
      <p>{person.bio}</p>
    </article>
  );
};
export default MultipleReturnsFetchData;

Answer 1

Is useEffect becoming obsolete for data fetching with the rise of React Query?

React Query (if you mean https://tanstack.com/query/latest) is just a library and doesn't make anything obsolete. See below:

Are there scenarios where useEffect is still preferred or necessary despite the capabilities of React Query?

How do you decide between using useEffect and React Query in your projects?

There are many ways to fetch data in React, and I for one prefer swr over TanStack Query due to its simplicity.

Additionally, considering the learning curve associated with useEffect, should new learners avoid it and start with React Query instead?

It's essential to understand how useEffect works, but writing your own data fetching from scratch with it over and over tends to be a chore and easy to get wrong around the corner cases (and unnecessary, given alternatives).