Callback functions can start to look like hell. Here is a quick way to do it using the async/await syntax.

Table of Contents

I created a video on my channel: “Coding with Lewis”.

Converting Callbacks to Async/Await

When you’re working with React and dealing with asynchronous operations, callback functions can quickly become nested and difficult to read. This is often called “callback hell.”

Here’s how you can convert your callback-based code to use the much cleaner async/await syntax:

Before: Using Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback(null, 'Data fetched successfully');
  }, 1000);
}

function handleData() {
  fetchData((error, data) => {
    if (error) {
      console.error('Error:', error);
    } else {
      console.log('Success:', data);
      // More nested callbacks here...
    }
  });
}

After: Using Async/Await

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 1000);
  });
}

async function handleData() {
  try {
    const data = await fetchData();
    console.log('Success:', data);
    // Clean, readable code
  } catch (error) {
    console.error('Error:', error);
  }
}

Why Async/Await is Better

1. Readability: Code reads more like synchronous code
2. Error Handling: Try/catch blocks are more intuitive
3. Debugging: Easier to debug with better stack traces
4. Maintainability: Less nesting means easier maintenance

React Example

Here’s how this applies in a React component:

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        setUser(userData);
      } catch (error) {
        console.error('Failed to fetch user:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

This approach makes your React components much cleaner and easier to understand!

Thanks for stopping by :)