JavaScript Async Patterns Every Mobile Developer Should Know

Why Async Matters More on Mobile

Mobile apps constantly deal with async operations � API calls, local storage reads, camera access, location. Getting async wrong means frozen UIs, uncaught errors, and battery drain.

Promises vs async/await

They are the same thing. async/await is syntax sugar over Promises.

// Promise chain
fetch('/api/user')
  .then(r => r.json())
  .then(user => console.log(user))
  .catch(err => console.error(err));

// async/await � cleaner, easier to read
async function loadUser() {
  try {
    const r = await fetch('/api/user');
    const user = await r.json();
    console.log(user);
  } catch (err) {
    console.error(err);
  }
}

Common Pitfall: Missing await

// Bug � not awaited, runs before save completes
async function saveData() {
  AsyncStorage.setItem('key', 'value'); // forgot await!
  navigation.goBack();
}

// Correct
async function saveData() {
  await AsyncStorage.setItem('key', 'value');
  navigation.goBack();
}

Parallel Requests with Promise.all

// Sequential � slow (2 round trips)
const user = await fetchUser(id);
const posts = await fetchPosts(id);

// Parallel � fast (1 round trip worth of time)
const [user, posts] = await Promise.all([
  fetchUser(id),
  fetchPosts(id),
]);

Cancelling Requests with AbortController

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') setError(err);
    });

  return () => controller.abort(); // cancel on unmount
}, []);

Conclusion

Master Promise.all for parallel work, always await async calls, and always cancel in-flight requests on component unmount. These three habits eliminate 90% of async bugs in React Native apps.