If blocks ({#if}) in Svelte - Performance & Optimization

Performance: If blocks ({#if})

MEDIUM IMPACT

Controls conditional rendering which impacts DOM size and layout recalculations during state changes.

Showing or hiding UI elements based on user interaction

Svelte

{#if showContent}
  <div>Content</div>
{/if} <!-- element only in DOM when needed -->

Only renders elements when needed, reducing DOM nodes and layout recalculations.

📈 Performance GainReduces reflows and repaints, improving interaction responsiveness (INP)

Showing or hiding UI elements based on user interaction

Svelte

<div style="display: none">Content</div> <!-- always in DOM but hidden -->

Keeps all elements in the DOM even when hidden, causing unnecessary layout and paint work.

📉 Performance CostTriggers layout and paint for hidden elements, increasing INP and memory usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using CSS display:none to hide elements	No DOM changes	No reflow triggered for hidden elements	Paint triggered for hidden elements	[X] Bad
Using {#if} to conditionally render elements	DOM nodes added/removed as needed	Single reflow per toggle	Paint only for visible elements	[OK] Good

Rendering Pipeline

The {#if} block controls whether elements exist in the DOM. When the condition changes, Svelte adds or removes nodes, triggering layout and paint updates.

→DOM Update

→Layout

→Paint

⚠️ BottleneckLayout stage due to adding/removing nodes causing reflows

Core Web Vital Affected

INP

Controls conditional rendering which impacts DOM size and layout recalculations during state changes.

Optimization Tips

1Use {#if} blocks to add/remove elements instead of hiding with CSS to reduce layout and paint cost.

2Avoid toggling {#if} conditions too frequently to prevent layout thrashing.

3Keep {#if} blocks simple and avoid deep nesting for better rendering performance.

Performance Quiz - 3 Questions

What is the main performance benefit of using Svelte's {#if} block instead of hiding elements with CSS?

A Elements are removed from the DOM, reducing layout and paint work

B CSS display:none is faster because it avoids DOM changes

C Both have the same performance impact

D {#if} blocks increase bundle size significantly

DevTools: Performance

How to check: Record a performance profile while toggling the {#if} condition. Look for layout and paint events in the flame chart.

What to look for: Fewer layout and paint events when using {#if} compared to toggling CSS display.

Practice

1. What does the {#if} block do in Svelte?

easy

A. It conditionally shows or hides content based on a true or false value.

B. It loops over a list of items to display them.

C. It styles elements with CSS inside the component.

D. It defines a reusable component.

Solution

1. Step 1: Understand the purpose of {#if}

   The {#if} block is used to check a condition and decide if some content should be shown or hidden.

2. Step 2: Compare with other options

   Looping is done with {#each}, styling is done with CSS, and reusable components are separate files or functions.

3. Final Answer:

   It conditionally shows or hides content based on a true or false value. -> Option A

4. Quick Check:

   Conditional display = C [OK]

Hint: If you want to show/hide, think {#if} block [OK]

Common Mistakes:

• Confusing {#if} with loops like {#each}
• Thinking {#if} styles elements
• Mixing {#if} with component creation

2. Which of the following is the correct syntax for an {#if} block in Svelte?

easy

A. {if condition} ... {endif}

B. <if condition> ... </if>

C. {#if condition} ... {/if}

D. {#if condition} ... {#end}

Solution

1. Step 1: Recall Svelte if block syntax

   Svelte uses {#if condition} ... {/if} to start and end an if block.

2. Step 2: Check other options for correctness

   Options A and C use incorrect syntax from other languages or HTML. {#if condition} ... {#end} uses a wrong closing tag.

3. Final Answer:

   {#if condition} ... {/if} -> Option C

4. Quick Check:

   Correct Svelte if syntax = B [OK]

Hint: Remember Svelte uses {/if} to close if blocks [OK]

Common Mistakes:

• Using HTML <if> tags instead of Svelte syntax
• Forgetting the # in {#if}
• Using wrong closing tags like {#end}

3. What will be rendered by this Svelte code?

{`\n{#if loggedIn}\n  
Welcome back!
\n{:else}\n  
Please log in.
\n{/if}`}

medium

A. Welcome back!

B. Please log in.

C. Nothing will be shown

D. Syntax error

Solution

1. Step 1: Check the value of loggedIn

   The variable loggedIn is set to false initially.

2. Step 2: Understand the if-else block behavior

   If loggedIn is true, it shows "Welcome back!"; else it shows "Please log in." Since loggedIn is false, the else block runs.

3. Final Answer:

   <p>Please log in.</p> -> Option B

4. Quick Check:

   loggedIn false shows else block = A [OK]

Hint: False condition shows {:else} content [OK]

Common Mistakes:

• Assuming false shows the if block content
• Ignoring the {:else} block
• Thinking no output if condition false

4. Identify the error in this Svelte code snippet:

{`\n{#if count > 3}\n  
Count is high
\n{:else if count > 1}\n  
Count is medium
\n{:else}\n  
Count is low
\n{/if}`}

medium

A. The syntax {:else if} is invalid in Svelte.

B. The variable count should be declared with const, not let.

C. The closing tag {/if} is missing.

D. There is no error; the code is correct.

Solution

1. Step 1: Check if {:else if} is valid in Svelte

   Svelte supports {:else if} syntax to chain conditions inside {#if} blocks.

2. Step 2: Verify variable declaration and closing tags

   Using let for count is correct for reactive variables. The {/if} closing tag is present.

3. Final Answer:

   There is no error; the code is correct. -> Option D

4. Quick Check:

   Valid else if syntax and proper closure = A [OK]

Hint: Svelte supports {:else if} inside {#if} blocks [OK]

Common Mistakes:

• Thinking {:else if} is invalid syntax
• Forgetting {/if} closing tag
• Confusing let and const for reactive vars

5. You want to display a message only if a user is logged in and has admin rights. Which Svelte {#if} block correctly checks both conditions?

hard

A. {#if loggedIn && isAdmin} Welcome, admin! {/if}

B. {#if loggedIn || isAdmin} Welcome, admin! {/if}

C. {#if loggedIn} {:if isAdmin} Welcome, admin! {/if} {/if}

D. {#if loggedIn | isAdmin} Welcome, admin! {/if}

Solution

1. Step 1: Understand the condition requirements

   The message should show only if both loggedIn and isAdmin are true, so we need a logical AND.

2. Step 2: Evaluate each option's logic

   {#if loggedIn | isAdmin}

   Welcome, admin!

   {/if} uses | bitwise OR which shows if either is true (wrong). {#if loggedIn || isAdmin}

   Welcome, admin!

   {/if} uses || logical OR which means either can be true (wrong). {#if loggedIn} {:if isAdmin}

   Welcome, admin!

   {/if} {/if} uses invalid {:if} syntax. {#if loggedIn && isAdmin}

   Welcome, admin!

   {/if} uses && logical AND which requires both true (correct).

3. Final Answer:

   {#if loggedIn && isAdmin} <p>Welcome, admin!</p> {/if} -> Option A

4. Quick Check:

   Use && for both true conditions [OK]

Hint: Use && to require both conditions true in {#if} [OK]

Common Mistakes:

• Using || instead of && for both conditions
• Using bitwise | instead of logical &&
• Using invalid {:if} syntax