React components in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Astro + React component integration?

Consider this Astro file importing a React component. What will be rendered on the page?

Astro

/* Astro file: Example.astro */
---
import Counter from './Counter.jsx';
---
<html lang="en">
  <body>
    <Counter client:load start={5} />
  </body>
</html>

/* React component: Counter.jsx */
import React, { useState } from 'react';
export default function Counter({ start }) {
  const [count, setCount] = useState(start);
  return (
    <button onClick={() => setCount(count + 1)} aria-label="Increment count">
      Count: {count}
    </button>
  );
}

A A static text 'Count: 5' with no button or interaction.

B A button labeled 'Count: 5' that increments the count on click.

C A button labeled 'Count: 0' that increments the count on click.

D An error because React components cannot receive props in Astro.

💡 Hint

Think about how props are passed from Astro to React components and how React state initializes.

The React component Counter receives the start prop with value 5 from Astro. It uses this as the initial state for count. The button shows 'Count: 5' initially and increments on click.

📝 Syntax

intermediate

Which option correctly imports and uses a React component in Astro?

Choose the correct Astro syntax to import and render a React component named MyButton from ./MyButton.jsx.

A

---
import MyButton from './MyButton.jsx';
---
<component src={MyButton} />

B

---
import { MyButton } from './MyButton.jsx';
---
<MyButton />

C

---
import MyButton from './MyButton.jsx';
---
<ReactComponent src={MyButton} />

D

---
import MyButton from './MyButton.jsx';
---
<MyButton />

💡 Hint

Astro imports React components as default exports and uses JSX syntax directly.

Option D correctly imports the default export and uses it as a JSX tag. Option D tries named import which is invalid if MyButton is default export. Options A and C use invalid Astro syntax for React components.

❓ lifecycle

advanced

How does React component lifecycle behave when used in Astro with client:load?

Given a React component used in Astro with client:load directive, when does the React component mount?

Astro

<!-- Astro file snippet -->
<MyComponent client:load />

A The React component mounts immediately on page load in the browser after Astro renders static HTML.

B The React component mounts during server-side rendering before sending HTML to the browser.

C The React component never mounts because client:load disables hydration.

D The React component mounts only when the user scrolls to it.

💡 Hint

Recall what client:load means in Astro for React components.

client:load tells Astro to render static HTML first, then hydrate and mount the React component immediately after the page loads in the browser.

🔧 Debug

advanced

Why does this React component fail to hydrate in Astro?

Astro renders this React component, but React hydration fails with a mismatch error. What is the likely cause?

Astro

/* React component Counter.jsx */
import React, { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(Math.floor(Math.random() * 10));
  return <div>Count: {count}</div>;
}

/* Astro file */
---
import Counter from './Counter.jsx';
---
<Counter client:load />

A React components cannot use useState in Astro, causing hydration errors.

B Missing a key prop on the Counter component causes hydration failure.

C The initial state uses random value causing server and client HTML to differ, breaking hydration.

D client:load directive is invalid and prevents hydration.

💡 Hint

Think about what happens when server and client render different initial HTML.

Using random value in useState means server renders one number, client another. This mismatch breaks React hydration.

🧠 Conceptual

expert

What is the best explanation of Astro's partial hydration with React components?

Astro supports partial hydration of React components. Which statement best describes this behavior?

A Astro renders static HTML for the whole page and hydrates only specified React components on the client, improving performance.

B Astro fully hydrates all React components on the client regardless of directives, ensuring full interactivity.

C Astro converts React components to static HTML at build time and never hydrates them on the client.

D Astro requires React components to be wrapped in a special provider to enable hydration.

💡 Hint

Consider how Astro optimizes loading by hydrating only parts that need interactivity.

Astro sends static HTML for the page and hydrates only React components marked with client directives like client:load or client:idle, reducing JavaScript load and improving speed.

Practice

1. What is the main reason to use React components inside an Astro page?

easy

A. To add interactive features to a mostly static Astro page

B. To replace Astro's static rendering completely

C. To write server-side code only

D. To avoid using any JavaScript on the page

Solution

1. Step 1: Understand Astro's rendering model

   Astro renders static HTML by default for fast loading.

2. Step 2: Role of React components in Astro

   React components add interactivity on top of static content.

3. Final Answer:

   To add interactive features to a mostly static Astro page -> Option A

4. Quick Check:

   React components = interactivity [OK]

Hint: React in Astro adds interactivity, not replaces static content [OK]

Common Mistakes:

• Thinking React replaces Astro's static rendering
• Believing React components run only on server
• Assuming no JavaScript is used with React

2. Which of the following is the correct way to load a React component in an Astro file for client-side interactivity?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Astro client directives

   Astro uses client:load to load components on the client after page load.

2. Step 2: Identify correct directive for React interactivity

   client:load is the standard for React components to run in browser.

3. Final Answer:

   <ReactComponent client:load /> -> Option C

4. Quick Check:

   client:load = client-side React load [OK]

Hint: Use client:load to run React components in browser [OK]

Common Mistakes:

• Using client:server which runs only on server
• Using client:static which disables interactivity
• Confusing client:only with client:load

3. Given this Astro code snippet, what will be the rendered output in the browser after loading?

---
import Counter from '../components/Counter.jsx';
---

Assuming Counter is a React component that shows a button and a count starting at 0, which increments on click.

medium

A. A static button with count 0 that increments on click

B. A static button with count 0 but no increment on click

C. No button rendered because React is not loaded

D. An error because client:load is invalid

Solution

1. Step 1: Understand client:load behavior

   The client:load directive loads the React component in the browser, enabling interactivity.

2. Step 2: React Counter component behavior

   The Counter component shows a button with count 0 and increments count on click.

3. Final Answer:

   A static button with count 0 that increments on click -> Option A

4. Quick Check:

   client:load enables React interactivity [OK]

Hint: client:load means React runs and updates UI interactively [OK]

Common Mistakes:

• Thinking the button is static without interactivity
• Assuming React component won't render without server code
• Believing client:load causes errors

4. What is wrong with this Astro code snippet?

---
import MyButton from '../components/MyButton.jsx';
---

Assuming MyButton is a React component that should be interactive on the client.

medium

A. client:server causes the component to load twice

B. The import path is incorrect

C. React components cannot be used in Astro files

D. client:server does not load React components on the client for interactivity

Solution

1. Step 1: Understand client:server directive

   client:server means the component runs only on the server, no client interactivity.

2. Step 2: Requirement for React interactivity

   To make React interactive in browser, use client:load or similar client directives.

3. Final Answer:

   client:server does not load React components on the client for interactivity -> Option D

4. Quick Check:

   client:server = no client interactivity [OK]

Hint: Use client:load, not client:server, for React interactivity [OK]

Common Mistakes:

• Confusing client:server with client:load
• Assuming React components can't be interactive in Astro
• Thinking import path causes this error

5. You want to include a React component in an Astro page that fetches data from an API and updates on user interaction. Which approach correctly combines Astro's static rendering with React's dynamic behavior?

hard

A. Render the React component only on the server with client:server

B. Import the React component and use client:load to hydrate it on the client

C. Use Astro's built-in fetch inside the React component without client directives

D. Embed React code directly in Astro without importing or client directives

Solution

1. Step 1: Understand Astro static + React dynamic model

   Astro renders static HTML first, React components hydrate on client for interactivity.

2. Step 2: Correct way to hydrate React component

   Using client:load loads React on client, enabling data fetching and updates.

3. Final Answer:

   Import the React component and use <code>client:load</code> to hydrate it on the client -> Option B

4. Quick Check:

   client:load hydrates React for dynamic updates [OK]

Hint: Use client:load to combine static Astro with React dynamic [OK]

Common Mistakes:

• Trying to fetch data only on server without client hydration
• Embedding React code without proper client directives
• Assuming React runs without importing or hydration