mediumFrontend

How do you handle asynchronous operations in React functional components?

Q: How do you handle asynchronous operations in React functional components?

**Core concept (TL;DR).** Put async work where it belongs: **user-triggered** async (submitting a form) in **event handlers**; async that **synchronizes** with external data (fetching for current props) in useEffect . Effects can't be async themselves, so define an async function inside. Track pending/error state, use try/catch with async/await , and guard against races/unmount. Async in handlers vs effects (with pending UI) <text x="135" y="64" fi

930 views

Understand the problem

This question evaluates knowledge of managing side effects and data fetching in modern React.

asyncuseEffectdata fetchinghooks

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Async in a handler with pending + try/catch

import { useState } from "react";

export default function App() {
  const [pending, setPending] = useState(false);
  const [result, setResult] = useState("");

  async function save() {
    setPending(true);
    try {
      const res = await fetch("/api/save", { method: "POST" });
      setResult(res.ok ? "saved" : "failed");
    } catch (e) {
      setResult("error: " + e.message);
    } finally {
      setPending(false);
    }
  }

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <button onClick={save} disabled={pending}>{pending ? "Saving…" : "Save"}</button>
      <p>{result}</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does React handle events?

What is the Context API in React and when would you use it?