Practice Questions

The component renders at least twice:

1. First render (mount): The component renders with the initial state (null). The useEffect callback is scheduled but has not run yet, so no data is available. The JSX must handle this, typically by showing “Loading…” or nothing.
2. After the fetch resolves: The .then() callback calls setState with the fetched data. This triggers a second render with the actual data, and the component can now display it.

You must handle the null state because React renders the component before the effect runs. If your JSX tries to access a property on null (e.g., data.name), it will throw a runtime error. You can handle it with conditional rendering (data ? <Content /> : <Loading />), optional chaining (data?.name), or an early return (if (!data) return <p>Loading...</p>).

import { useEffect, useState } from "react";

interface User {
  name: string;
}

const UserGreeting = () => {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetch("https://api.example.com/users/1")
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  return <h1>{user ? `Hello, ${user.name}!` : "Loading..."}</h1>;
};

export default UserGreeting;

Key points: useState initializes to null since we have no data yet. useEffect with [] ensures the fetch happens once on mount. We handle the null state with a conditional expression.

A TypeScript interface gives you a few things:

• Autocompletion: your editor can suggest property names and catch typos.
• Type checking at compile time: if you try to access a property that does not exist on the interface, TypeScript flags the error before you run the code.
• Documentation: the interface describes the shape of the data, so you can see which fields are available.
• Mapping raw responses: when an API returns many fields but your app only needs a few, you can define a smaller internal interface and map the response to it. This decouples your UI from the API’s exact shape.

Using any removes all of these benefits. You lose safety and discoverability.

const API_URL = "https://api.example.com/books";

export async function fetchBook(id: string): Promise<Book> {
  const response = await fetch(`${API_URL}/${id}`);
  if (!response.ok) {
    throw new Error(`API request failed with status: ${response.status}`);
  }
  const data: ApiBook = await response.json();

  return {
    title: data.volumeInfo.title,
    author: data.volumeInfo.authors.join(", "),
    year: data.volumeInfo.publishedDate,
    cover: data.volumeInfo.imageLinks.thumbnail,
  };
}

The function fetches raw API data typed as ApiBook, checks for errors, then maps only the needed fields into the simpler Book shape. This decouples your component from the exact structure of the external API.

interface Item {
  id: number;
  name: string;
}

interface ItemListProps {
  items: Item[];
}

const ItemList = ({ items }: ItemListProps) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ItemList;

Each <li> needs a unique key so React can efficiently track which items change, are added, or are removed. The item’s id is a good key because it is stable and unique. Do not use the array index as a key when the list can change, because that can cause incorrect re-renders.

The data flows through these steps:

1. Service function – a standalone async function (in a services/ module) that calls fetch, checks the response, and maps the raw JSON to a well-typed internal model. It knows nothing about React.
2. useEffect – the component calls the service function inside useEffect (typically with [] for on-mount fetching or [dep] to re-fetch when a dependency changes). This keeps the side effect out of the render path.
3. useState – the effect’s .then() callback stores the fetched data in state via setState. This triggers a re-render with the new data.
4. Props – the component that owns the data passes it down to child components via props. Children render the data or pass it further down. If a child needs to trigger a new fetch (e.g., selecting a different item), the parent passes a callback prop that updates state, which changes the useEffect dependency and triggers a re-fetch.

Each piece has a single responsibility: the service handles I/O and data shaping, useEffect manages timing, useState holds the data and triggers renders, and props connect components in a one-way flow.

import { useState } from "react";
import SearchBar from "./SearchBar";
import ResultsList from "./ResultsList";

const App = () => {
  const [query, setQuery] = useState("");

  return (
    <div>
      <SearchBar onQueryChange={setQuery} />
      <ResultsList query={query} />
    </div>
  );
};

export default App;

App owns the query state. It passes setQuery (or a wrapper callback) to SearchBar so the child can notify the parent when the user types. It passes the current query value to ResultsList so it can filter or fetch results. This is the same lifting-state-up pattern: state down, events up.

import { useEffect, useState } from "react";

interface PriceDisplayProps {
  productId: string;
}

const PriceDisplay = ({ productId }: PriceDisplayProps) => {
  const [price, setPrice] = useState<number | null>(null);

  useEffect(() => {
    fetch(`https://api.example.com/products/${productId}`)
      .then((res) => res.json())
      .then((data) => setPrice(data.price));
  }, [productId]);

  return <p>{price !== null ? `$${price.toLocaleString()}` : "Loading..."}</p>;
};

export default PriceDisplay;

The key detail is [productId] in the dependency array. This tells React to re-run the effect whenever productId changes, triggering a new fetch. Without it (using []), the component would only fetch once on mount and never update when a different product is selected.

Optional chaining (?.) short-circuits to undefined if the value on the left is null or undefined, instead of throwing a runtime error.

It is especially useful with fetched data because the data starts as null before the API responds. Without optional chaining, accessing a property on null would crash the component.

const [user, setUser] = useState<{
  name: string;
  address: { city: string };
} | null>(null);

// Without optional chaining -- crashes if user is null:
// const city = user.address.city;

// With optional chaining -- safely returns undefined:
const city = user?.address?.city;

This allows the component to render safely (e.g., showing nothing or a fallback) while the data is still loading.

Putting the fetch logic in a service module helps in a few ways:

• Reusability: multiple components can call the same service function without duplicating the fetch logic.
• Separation of concerns: components focus on rendering UI, while service modules handle data fetching and transformation. This makes each file easier to read and maintain.
• Easier testing: you can test the service function in isolation, mocking fetch without rendering a component.
• Centralized error handling: error checking (like if (!response.ok)) and response mapping live in one place rather than being scattered across components.
• Type safety: the service function can type the raw API response internally and return a clean, well-typed object that components consume, decoupling the UI from the API shape.

There are two problems:

1. Side effect outside useEffect: the fetch runs directly in the component body, so it executes on every render. Calling setPosts triggers a re-render, which runs the fetch again, causing an infinite loop.
2. Not handling the Promise: fetch returns a Promise, but the code treats the result as if it were synchronous. You need .then() or await to get the actual data.

Fixed version:

import { useEffect, useState } from "react";

interface Post {
  id: number;
  title: string;
}

const PostList = () => {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    fetch("https://api.example.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default PostList;

Wrapping the fetch in useEffect with [] ensures it runs once on mount, and .then() properly handles the asynchronous response.