client:media for responsive interactivity in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does client:media affect component rendering?

Consider an Astro component using client:media with a media query (min-width: 600px). What happens when the viewport width is 500px?

Astro

<script>
  export let message = "Hello!";
</script>

<div client:media="(min-width: 600px)">{message}</div>

A The component does not hydrate or run on the client because the media query is false.

B The component hydrates and runs on the client regardless of viewport size.

C The component throws an error because the media query is invalid at 500px.

D The component renders twice, once server-side and once client-side.

💡 Hint

Think about when client:media activates the component based on the media query.

client:media only hydrates the component on the client if the media query matches. At 500px, (min-width: 600px) is false, so the component stays static without client-side hydration.

❓ state_output

intermediate

What is the output when using client:media with dynamic state?

Given this Astro component that toggles a message on button click, but uses client:media="(min-width: 800px)", what will happen if the viewport is 700px wide and the button is clicked?

Astro

<script type="jsx" client:media="(min-width: 800px)">
  import { useState } from 'react';
  export default function Toggle() {
    const [show, setShow] = useState(false);
    return (
      <>
        <button onClick={() => setShow(!show)}>Toggle</button>
        {show && <p>Visible</p>}
      </>
    );
  }
</script>

A The message toggles normally because the component always hydrates regardless of media query.

B Nothing happens because the component is not hydrated at 700px, so clicks do not trigger state changes.

C The component throws a runtime error because state is used with client:media.

D The message is visible by default even before clicking the button.

💡 Hint

Remember how client:media controls hydration based on viewport size.

At 700px, the media query (min-width: 800px) is false, so the component does not hydrate. Without hydration, React state and event handlers do not work, so clicking the button has no effect.

📝 Syntax

advanced

Identify the correct syntax for client:media usage in Astro

Which of the following is the correct way to use client:media to hydrate a component only on screens smaller than 500px?

A <MyComponent client:media='max-width: 500px' />

B <MyComponent client:media={(max-width: 500px)} />

C <MyComponent client:media="(max-width: 500px)" />

D <MyComponent client:media="max-width: 500px" />

💡 Hint

Check the quotes and parentheses usage for attribute values in Astro components.

The correct syntax uses quotes around the entire media query string. Option C correctly uses double quotes and parentheses inside the string. Options B, C, and D have syntax errors or missing parentheses.

🔧 Debug

advanced

Why does this client:media component fail to hydrate?

Given this Astro component, why does it fail to hydrate when the viewport is outside the 400-600px range?

Astro

<script type="jsx" client:media="(min-width: 400px) and (max-width: 600px)">
  export default function Info() {
    return <p>Info visible only between 400px and 600px</p>;
  }
</script>

A The media query syntax is invalid because <code>and</code> must be uppercase <code>AND</code>.

B The component fails because <code>client:media</code> requires a JavaScript import to work.

C The component fails because <code>client:media</code> only supports single media features, not combined queries.

D The component does not hydrate because the media query is never true if viewport is outside 400-600px range.

💡 Hint

Consider when the media query matches the viewport size.

The component only hydrates if the viewport width is between 400px and 600px. If tested outside this range, it will not hydrate. The syntax and usage are correct, so the reason is the media query condition.

🧠 Conceptual

expert

What is the main benefit of using client:media in Astro?

Choose the best explanation for why client:media is useful in building responsive web apps with Astro.

A <code>client:media</code> delays hydration until the media query matches, improving performance by avoiding unnecessary JavaScript on unsupported screen sizes.

B <code>client:media</code> replaces CSS media queries by controlling layout purely with JavaScript.

C <code>client:media</code> forces all components to hydrate immediately regardless of screen size for consistency.

D <code>client:media</code> automatically resizes images based on screen size without additional code.

💡 Hint

Think about hydration and performance in responsive design.

client:media lets Astro hydrate components only when the media query matches, saving resources and improving load times on devices where the component is not needed.

Practice

1. What is the main purpose of using client:media in Astro components?

easy

A. To style components with CSS variables

B. To preload all components regardless of screen size

C. To disable JavaScript on mobile devices

D. To load components only when a specific media query matches

Solution

1. Step 1: Understand what client:media does

   client:media loads components conditionally based on media queries, meaning it only activates when the screen matches certain conditions.

2. Step 2: Compare options with this behavior

   To load components only when a specific media query matches this behavior exactly. Options B, C, and D describe unrelated or incorrect behaviors.

3. Final Answer:

   To load components only when a specific media query matches -> Option D

4. Quick Check:

   client:media loads components conditionally = A [OK]

Hint: Remember: client:media triggers only on matching screen sizes [OK]

Common Mistakes:

• Thinking client:media preloads all components
• Confusing client:media with CSS styling
• Assuming it disables JavaScript entirely

2. Which of the following is the correct syntax to load a component only on screens wider than 768px using client:media?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct media query syntax

   Media queries require parentheses around conditions, e.g., (min-width: 768px).

2. Step 2: Match syntax with options

   <Component client:media="(min-width: 768px)" /> uses correct parentheses and syntax. <Component client:media="min-width: 768px" /> misses parentheses. <Component client:media="screen and min-width: 768px" /> has incorrect syntax (missing parentheses around the condition). <Component client:media="(max-width: 768px)" /> uses max-width, which is the opposite condition.

3. Final Answer:

   <Component client:media="(min-width: 768px)" /> -> Option A

4. Quick Check:

   Correct media query syntax = B [OK]

Hint: Always wrap media queries in parentheses for client:media [OK]

Common Mistakes:

• Omitting parentheses around media queries
• Using max-width instead of min-width by mistake
• Adding unnecessary keywords like 'screen and'

3. Given this Astro component usage:

<MyWidget client:media="(max-width: 600px)" />

What happens when the screen width is 500px?

medium

A. The MyWidget component loads only on the server

B. The MyWidget component loads and runs on the client

C. The MyWidget component loads but does not run JavaScript

D. The MyWidget component does not load at all

Solution

1. Step 1: Understand the media query condition

   The media query (max-width: 600px) matches screen widths 600px or less.

2. Step 2: Check screen width against condition

   At 500px, the condition is true, so the component loads and runs on the client.

3. Final Answer:

   The MyWidget component loads and runs on the client -> Option B

4. Quick Check:

   Screen 500px matches max-width 600px = D [OK]

Hint: If screen matches query, component loads and runs client-side [OK]

Common Mistakes:

• Thinking component loads but does not run JavaScript
• Assuming component loads only on server
• Confusing max-width with min-width behavior

4. Identify the error in this Astro component usage:

<Sidebar client:media="min-width: 1024px" />

medium

A. Missing parentheses around the media query

B. Using client:media instead of client:load

C. Incorrect component name capitalization

D. Media query should be max-width, not min-width

Solution

1. Step 1: Check media query syntax

   The media query must be wrapped in parentheses, e.g., (min-width: 1024px).

2. Step 2: Verify other parts

   Component name capitalization is fine. Using client:media is correct for media queries. min-width is valid depending on intent.

3. Final Answer:

   Missing parentheses around the media query -> Option A

4. Quick Check:

   Media queries need parentheses = A [OK]

Hint: Always wrap media queries in parentheses to avoid syntax errors [OK]

Common Mistakes:

• Omitting parentheses in media queries
• Confusing client:media with client:load
• Changing media query type without reason

5. You want to load a navigation menu component only on screens between 600px and 1200px wide. Which client:media attribute correctly achieves this?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand the range condition

   You want the component to load only when the screen width is at least 600px and at most 1200px.

2. Step 2: Analyze each option's media query

   <NavigationMenu client:media="(min-width: 600px) and (max-width: 1200px)" /> correctly uses and to combine (min-width: 600px) and (max-width: 1200px). Options A and B have reversed or impossible ranges. <NavigationMenu client:media="(min-width: 600px) or (max-width: 1200px)" /> uses or, which matches too broadly.

3. Final Answer:

   <NavigationMenu client:media="(min-width: 600px) and (max-width: 1200px)" /> -> Option C

4. Quick Check:

   Use 'and' to combine min and max width = C [OK]

Hint: Use 'and' to combine min-width and max-width in client:media [OK]

Common Mistakes:

• Reversing min-width and max-width order
• Using 'or' instead of 'and' for range
• Creating impossible media query ranges