Skip to content

Incorrect referred documentation in fetching with Hooks #2902

Description

@hseghetti

The provided documentation is not accurate because it refers to an article that is not correct based on the eslint(react-hooks/exhaustive-deps) rules.

https://reactjs.org/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks

Documentation quote:
"How can I do data fetching with Hooks?
Here is a small demo to get you started. To learn more, check out this article about data fetching with Hooks."

Referred Article's URL: https://www.robinwieruch.de/react-hooks-fetch-data
In the provided example we have:

useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
    setData(result.data);
  }, []);

but the rule from eslint(react-hooks/exhaustive-deps) says:

Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions