React Native async programming

Promises, futures, async/await, callbacks, coroutines, tasks, and avoiding blocked apps.

Chapter goal: Promises, futures, async/await, callbacks, coroutines, tasks, and avoiding blocked apps.

Simple explanation

Async work is like taking a waiting ticket. The app can keep responding while a slow network or file operation finishes.

In React Native, this chapter is about waiting for slow work without freezing the program. Start with the idea above. Then connect each symbol to a value or action in the example.

Do not try to remember every symbol. First ask what data the program has, what it does with that data, and what result it creates. Technical words become easier when you connect them to those three questions.

Why this topic is important

Network, file, database, timers, and UI work often happen later, not immediately. In React Native, the syntax may look different from other languages, but the thinking skill transfers: name the data, choose the right operation, and make the next step obvious.

When to use it

Use async code for API calls, downloads, uploads, animation timing, database calls, and background tasks.

Example code

async function loadProfile() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return "Aina";
}

const name = await loadProfile();

Line-by-line explanation

• async function loadProfile() { — This defines a reusable function. Its name describes the job that other code can call.
• await new Promise(resolve => setTimeout(resolve, 1000)); — This waits for asynchronous work to finish without pretending the result is already available.
• return "Aina"; — This sends a result back to the code that called the function. Returning is different from printing.
• const name = await loadProfile(); — This waits for asynchronous work to finish without pretending the result is already available.

What the output means

A profile or completion message appears after the asynchronous work finishes.

The output is evidence that the program followed the instructions. If your result is different, read from the first line and write down how each value changes. That is debugging, not failure.

Mistake example

async function loadProfile() {
  new Promise(resolve => setTimeout(resolve, 1000));
  return "Aina";
}

const name = loadProfile();

The asynchronous result is used without waiting for completion, so later code may receive a future, promise, or missing data.

Fixed version

async function loadProfile() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return "Aina";
}

const name = await loadProfile();

The corrected version waits for slow work before reading its result.

Common mistakes

• Forgetting to await work before using the result.
• Blocking the UI thread.
• Starting async work without handling errors.

Warning: Change one part at a time. If you change many lines together, it becomes harder to learn which change caused the result.

Real use cases

• Load a user profile.
• Save progress in the background.
• Fetch data while showing a loading state.

Practice exercise

1. Find every operation that must be awaited.
2. Add an error path.
3. Prevent the UI from using data before it arrives.

Tip: If the exercise feels too large, complete only steps 1 to 3. Small working code teaches more than a large unfinished project.

Mini quiz

1. What does await wait for?
2. Why should the UI show a loading state?
3. Where should async errors be handled?

How to read AI-generated code

Do not copy AI code first. Read it like a detective. Find the data, follow the changes, and locate the final output. Ask AI to explain a line only after you have made your own guess.

• What data goes in?
• What values are stored?
• What calculation or decision happens?
• What is printed, displayed, saved, or returned?
• What can go wrong?
• Can you rename one value and still explain the code?

React Native reading check

Find the component inputs (props), changing values (state), event handlers, and effects. An effect that fetches data must also handle loading, failure, and a component that leaves the screen.

Before you move on

• I can explain this topic in my own words.
• I can read the small example without AI.
• I can change the example and predict the new result.
• I can find and fix one simple mistake.
• I can name one real project that uses this idea.

Next topic

Next, learn project structure and modules. Before opening it, explain this chapter out loud in under one minute.