Islands architecture in Fresh in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does an island component behave in Fresh?

In Fresh, what happens when an island component is rendered on the client side?

Consider that the island is a small interactive part of a mostly static page.

A The island component disables interactivity and behaves like a static HTML element.

B The island component hydrates only itself and manages its own state without reloading the entire page.

C The island component is rendered only on the server and never runs any client-side JavaScript.

D The entire page is re-rendered on the client whenever the island component updates.

💡 Hint

Think about how islands isolate interactivity to small parts of the page.

In Fresh, island components hydrate only themselves on the client, enabling interactivity without reloading or re-rendering the whole page. This keeps the page fast and efficient.

📝 Syntax

intermediate

Correct syntax to define an island component in Fresh

Which of the following code snippets correctly defines an island component in Fresh using Deno?

A export default function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; }

B import { ISLAND } from "fresh"; export default function Counter() { return <button>Click me</button>; } export const [ISLAND] = true;

C export const Counter = () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; }; export const Island = true;

D import { ISLAND } from "fresh"; export default function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } export const [ISLAND] = true;

💡 Hint

Look for the standard way to export a component with hooks in Fresh.

In Fresh, island components are just default exported functions using hooks like useState. No special export like ISLAND is needed.

❓ state_output

advanced

State behavior in nested island components

Given two nested island components in Fresh, Parent and Child, where Child has its own state counter and Parent renders Child, what happens when Child's button is clicked?

Deno

function Child() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Child count: {count}</button>;
}

function Parent() {
  return <div><Child /></div>;
}

A Only Child's state updates and re-renders; Parent remains unchanged.

B Both Parent and Child re-render because Child's state change bubbles up.

C Neither component re-renders because state is not preserved in islands.

D Parent re-renders but Child does not update its state.

💡 Hint

Think about how islands isolate state and rendering.

In Fresh, each island manages its own state independently. Updating Child's state only re-renders Child, not Parent.

🔧 Debug

advanced

Identify the cause of hydration failure in a Fresh island

A developer notices that their island component in Fresh does not hydrate on the client and remains static. Which of the following is the most likely cause?

A The island component is missing the useState or useEffect hook, so Fresh skips hydration.

B The island component is wrapped inside another component that is not an island.

C The island component uses server-only APIs inside the component function.

D The island component is not exported as default from its module.

💡 Hint

Consider what prevents client-side JavaScript from running.

Using server-only APIs inside an island component causes hydration to fail because those APIs cannot run in the browser.

🧠 Conceptual

expert

Why does Fresh use islands architecture instead of full client-side rendering?

What is the main advantage of using islands architecture in Fresh compared to rendering the entire page as a single client-side app?

A It requires less server resources by moving all rendering to the client.

B It allows the entire page to be re-rendered on every user interaction for consistency.

C It forces all components to be server-rendered, disabling client-side interactivity.

D It reduces the amount of JavaScript sent to the client by hydrating only interactive parts, improving performance and load times.

💡 Hint

Think about how islands affect JavaScript size and page speed.

Islands architecture hydrates only small interactive parts, reducing JavaScript sent and improving performance compared to full client-side apps.

Practice

1. What is the main purpose of the Islands architecture in Fresh?

easy

A. To split pages into static and interactive parts for better performance

B. To make all parts of the page fully interactive

C. To load the entire page on the client side only

D. To disable JavaScript on the page

Solution

1. Step 1: Understand Islands architecture concept

   Islands architecture divides a web page into static parts and small interactive components called islands.

2. Step 2: Identify the main benefit

   This split improves page speed and maintainability by only hydrating interactive parts.

3. Final Answer:

   To split pages into static and interactive parts for better performance -> Option A

4. Quick Check:

   Islands architecture = split static + interactive [OK]

Hint: Islands means splitting page into static and interactive parts [OK]

Common Mistakes:

• Thinking all page parts are interactive
• Believing Islands disables JavaScript
• Assuming full client-side rendering

2. Which syntax correctly marks an interactive island component in Fresh?

easy

A. <ISLAND>MyComponent</ISLAND>

B. <Island>MyComponent</Island>

C. <island>MyComponent</island>

D. <ISLAND />

Solution

1. Step 1: Recall correct tag casing

   Fresh uses uppercase ISLAND tag to mark interactive components.

2. Step 2: Check tag usage

   The ISLAND tag wraps the component, so it needs opening and closing tags.

3. Final Answer:

   <ISLAND>MyComponent</ISLAND> -> Option A

4. Quick Check:

   Correct tag is uppercase ISLAND with open/close [OK]

Hint: Use uppercase <ISLAND> tags to mark interactive parts [OK]

Common Mistakes:

• Using lowercase or mixed case tags
• Using self-closing without children
• Confusing with other component tags

3. Given this Fresh page snippet, what will be interactive on the rendered page?

export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <ISLAND><Counter /></ISLAND>
      <p>Static text</p>
    </main>
  );
}

medium

A. Nothing is interactive because ISLAND is not a valid tag

B. The entire page including the heading and paragraph is interactive

C. Only the Counter component inside the ISLAND tag is interactive

D. Only the heading is interactive

Solution

1. Step 1: Identify ISLAND usage

   The Counter component is wrapped inside the ISLAND tag, marking it interactive.

2. Step 2: Understand static vs interactive parts

   The heading and paragraph are outside ISLAND, so they remain static and non-interactive.

3. Final Answer:

   Only the Counter component inside the ISLAND tag is interactive -> Option C

4. Quick Check:

   ISLAND wraps interactive parts only [OK]

Hint: Only components inside <ISLAND> are interactive [OK]

Common Mistakes:

• Assuming whole page is interactive
• Thinking ISLAND tag is invalid
• Believing static parts become interactive

4. What is wrong with this Fresh island component usage?

export default function Page() {
  return (
    <main>
      <ISLAND><Button /></ISLAND>
      <ISLAND><Button /></ISLAND>
    </main>
  );
}

medium

A. ISLAND tags must be self-closing

B. Using multiple ISLAND tags with the same component can cause duplicate hydration issues

C. Button component cannot be used inside ISLAND

D. ISLAND tags must wrap only one element, not components

Solution

1. Step 1: Analyze multiple ISLAND usage

   Using the same interactive component multiple times inside separate ISLAND tags can cause hydration conflicts if keys are missing.

2. Step 2: Understand hydration uniqueness

   Each island needs a unique key or identifier to avoid duplicate hydration errors.

3. Final Answer:

   Using multiple ISLAND tags with the same component can cause duplicate hydration issues -> Option B

4. Quick Check:

   Duplicate islands need unique keys to avoid errors [OK]

Hint: Multiple identical islands need unique keys to avoid errors [OK]

Common Mistakes:

• Thinking ISLAND tags must be self-closing
• Believing components can't be inside ISLAND
• Assuming ISLAND wraps only HTML elements

5. You want to optimize a Fresh page with many interactive buttons. Which approach best uses Islands architecture to improve performance?

hard

A. Use <ISLAND> tags only on static content to reduce JavaScript

B. Wrap all buttons together in a single <ISLAND> to hydrate them all at once

C. Do not use <ISLAND> tags and hydrate the entire page client-side

D. Wrap each button in its own <ISLAND> with unique keys to hydrate only needed parts

Solution

1. Step 1: Understand hydration granularity

   Wrapping each button in its own ISLAND allows independent hydration, improving performance by loading only needed parts.

2. Step 2: Importance of unique keys

   Assigning unique keys to each island prevents hydration conflicts and ensures smooth interactivity.

3. Final Answer:

   Wrap each button in its own <ISLAND> with unique keys to hydrate only needed parts -> Option D

4. Quick Check:

   Separate islands with keys = better performance [OK]

Hint: Use separate islands with unique keys for many interactive parts [OK]

Common Mistakes:

• Grouping all buttons in one island causing unnecessary hydration
• Not using ISLAND tags and hydrating whole page
• Misusing ISLAND on static content