Why React Developers Prefer const fetchData = async () => {} Over async function fetchData()

When writing asynchronous functions in React, you’ve probably noticed that developers tend to use the arrow function syntax:

const fetchData = async () => {}

more often than the traditional function declaration:

async function fetchData() {}

But why is this the case? While both approaches work, there are several key reasons why arrow functions are more commonly used in React applications.

1. Arrow Functions Have Lexical this Binding

In JavaScript, arrow functions do not have their own this context. Instead, they inherit this from the surrounding scope. While this is mostly relevant in class components, it’s still a good habit that prevents unexpected behavior.

For example, in a class component:

class MyComponent extends React.Component {
  async fetchData() {
    console.log(this); // `this` may not refer to MyComponent
  }

  componentDidMount() {
    this.fetchData();
  }
}

If fetchData is not properly bound, calling this.fetchData() inside componentDidMount might cause this to be undefined. Using an arrow function ensures this remains correct:

class MyComponent extends React.Component {
  fetchData = async () => {
    console.log(this); // Always refers to MyComponent
  };

  componentDidMount() {
    this.fetchData();
  }
}

In functional components, this issue doesn’t exist because there’s no this, but it’s still useful for consistency across codebases.

2. Better Integration with Hooks (useEffect, useCallback)

React Hooks, especially useEffect, encourage using inline functions to keep logic contained. Using an arrow function makes this seamless:

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
    console.log(data);
  };

  fetchData();
}, []);

If you use a function declaration, it would need to be defined outside the hook, making the code slightly less intuitive:

async function fetchData() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  console.log(data);
}

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

Using an arrow function keeps the logic scoped inside the effect, reducing the risk of accidentally calling fetchData elsewhere.

3. Avoids Hoisting Issues

Function declarations are hoisted, meaning they can be used before they’re defined. This is useful in some cases but can lead to confusion:

fetchData(); // Works fine

async function fetchData() {
  console.log("Fetching...");
}

On the other hand, arrow functions are not hoisted. If you try calling an arrow function before its declaration, JavaScript will throw an error:

fetchData(); // Error: fetchData is not defined

const fetchData = async () => {
  console.log("Fetching...");
};

This behavior encourages defining functions before use, making the code more predictable.

4. Consistency in Functional Components

Since modern React development favors functional components over class components, using arrow functions aligns well with that paradigm. Functional components themselves are written as arrow functions:

const MyComponent = () => {
  return <div>Hello</div>;
};

Using arrow functions for event handlers and asynchronous calls keeps the code consistent:

const MyComponent = () => {
  const fetchData = async () => {
    console.log("Fetching data");
  };

  return <button onClick={fetchData}>Fetch</button>;
};

5. Shorter, More Readable Code

In modern JavaScript, arrow functions are often preferred simply because they are more concise. Compare:

async function fetchData() {
  console.log("Fetching...");
}

versus

const fetchData = async () => {
  console.log("Fetching...");
};

The arrow function syntax removes the need for the function keyword, making the code slightly cleaner and easier to scan.

6. Easier to Use with .map(), .forEach(), and Other Functional Methods

When working with arrays, using arrow functions for async operations makes the syntax cleaner. For example, fetching data for multiple items:

const items = [1, 2, 3];

const fetchData = async (id) => {
  const res = await fetch(`https://api.example.com/items/${id}`);
  return res.json();
};

const fetchAllData = async () => {
  const results = await Promise.all(items.map(fetchData));
  console.log(results);
};

If we used a function declaration, we'd need an extra step to reference the function:

async function fetchData(id) {
  const res = await fetch(`https://api.example.com/items/${id}`);
  return res.json();
}

const fetchAllData = async () => {
  const results = await Promise.all(items.map((id) => fetchData(id)));
  console.log(results);
};

When Should You Use Function Declarations?

Although arrow functions are preferred in React, function declarations still have valid use cases:

1. When defining global helper functions outside of React components, where hoisting can be useful.
2. When working with prototypes or classes, where function declarations allow better method definitions.
3. If the function is used in multiple places, defining it outside keeps it DRY (Don’t Repeat Yourself).

Example of a function declaration for a reusable utility function:

async function fetchData(url) {
  const res = await fetch(url);
  return res.json();
}

This is fine because it’s a standalone function not directly tied to a React component’s lifecycle.

Finally

While both arrow functions and function declarations can handle async logic in React, arrow functions are the preferred choice due to:

• Lexical this binding, avoiding potential issues in class components.
• Better integration with hooks, especially useEffect and useCallback.
• Predictable scoping (no hoisting surprises).
• Cleaner and more consistent syntax with functional components.
• More concise, readable code that aligns with modern JavaScript practices.

However, function declarations still have their place, especially for reusable, hoisted utility functions.

So, next time you’re defining an async function in React, consider whether an arrow function might be the better choice!

Support Us