Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/easy

    Load User Profile

    Challenge workspace

    20-25 min
    Effects and data fetchingPath 23/40
    Async dataState & eventsConditional rendering

    Suggested first

    Repair the Support SLA Timer

    Your workspace must pass its server-side browser checks to complete this challenge.

    Load User Profile

    The Load button does nothing yet. Handle the three states every async operation produces: loading, success, and error.

    Requirements

    • Add user, loading, and error state.
    • In load: set loading to true and clear previous results before calling fetchUser.
    • Use try/catch/finally: set user on success, set error on failure, clear loading in finally.
    • Disable the button while loading is true.
    • Display the user card only when user is not null; display the error only when error is non-empty.

    What to explain

    Why does the error need to be cleared at the start of load, not only in the catch block?

    Progressive hints

    1. const load = async () => { ... } lets you await fetchUser(userId) inside.
    2. The three state variables cover three mutually meaningful conditions — only one meaningful state should be true at a time.
    3. finally { setLoading(false) } runs whether the fetch succeeded or failed.