Flash messages in Ruby on Rails - Performance & Optimization

Performance: Flash messages

MEDIUM IMPACT

Flash messages affect page load speed and user interaction responsiveness by adding DOM elements and triggering reflows when shown or hidden.

Displaying flash messages on page load and after user actions

Ruby on Rails

Render flash messages conditionally only when present, and use CSS transitions with opacity for showing/hiding without layout changes.

Reduces DOM nodes and avoids layout thrashing by not toggling display properties that affect layout.

📈 Performance GainSingle reflow on flash message insertion; smooth opacity transitions avoid layout recalculations

Displaying flash messages on page load and after user actions

Ruby on Rails

In the layout, always render flash divs with content even if empty, and use JavaScript to show/hide them by toggling display styles on every page load.

This causes unnecessary DOM nodes and style recalculations on every page load, triggering multiple reflows and slowing interaction responsiveness.

📉 Performance CostTriggers 2-3 reflows per page load; increases DOM size unnecessarily

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Always render flash divs and toggle display	High (extra nodes always present)	Multiple reflows per page load	High (layout changes trigger paint)	[X] Bad
Render flash divs conditionally and use opacity transitions	Low (only when needed)	Single reflow on insertion	Low (opacity changes only trigger paint/composite)	[OK] Good

Rendering Pipeline

Flash messages add or remove DOM elements and change styles, which flow through style calculation, layout, paint, and composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to toggling display properties causing reflows.

Core Web Vital Affected

INP

Flash messages affect page load speed and user interaction responsiveness by adding DOM elements and triggering reflows when shown or hidden.

Optimization Tips

1Render flash messages only when they have content to avoid extra DOM nodes.

2Use opacity and visibility CSS properties to show/hide flash messages instead of display toggling.

3Avoid frequent DOM updates for flash messages to keep interaction responsiveness high.

Performance Quiz - 3 Questions

What causes the most performance cost when showing flash messages?

A Toggling display property causing layout recalculations

B Using opacity transitions to fade messages

C Rendering flash messages only when present

D Using semantic HTML elements

DevTools: Performance

How to check: Record a performance profile while loading a page with flash messages. Look for layout and paint events triggered by flash message DOM changes.

What to look for: Multiple layout events indicate costly reflows; smooth paint/composite with minimal layout means good performance.

Practice

1. What is the main purpose of flash messages in a Rails application?

easy

A. To show temporary messages to users after actions like form submissions

B. To permanently store user data in the session

C. To style the webpage with CSS dynamically

D. To handle database transactions automatically

Solution

1. Step 1: Understand flash message role

   Flash messages provide feedback to users about actions they performed, like success or error notices.

2. Step 2: Differentiate from other features

   They are temporary and do not store data permanently or affect styling or database transactions.

3. Final Answer:

   To show temporary messages to users after actions like form submissions -> Option A

4. Quick Check:

   Flash messages = temporary user feedback [OK]

Hint: Flash messages show quick feedback after user actions [OK]

Common Mistakes:

• Thinking flash stores data permanently
• Confusing flash with CSS or styling
• Assuming flash manages database

2. Which of the following is the correct way to set a flash notice in a Rails controller?

easy

A. flash.notice = "Saved successfully"

B. flash->notice = "Saved successfully"

C. flash[:notice] = "Saved successfully"

D. flash('notice') = "Saved successfully"

Solution

1. Step 1: Recall flash syntax in Rails

   Flash messages are set using the hash-like syntax with symbols, e.g., flash[:notice] = "message".

2. Step 2: Identify correct syntax

   Options A, B, and C use invalid Ruby or Rails syntax for flash assignment.

3. Final Answer:

   flash[:notice] = "Saved successfully" -> Option C

4. Quick Check:

   flash[:key] = message [OK]

Hint: Use flash[:notice] = "message" to set flash [OK]

Common Mistakes:

• Using dot notation instead of brackets
• Using parentheses incorrectly
• Using arrow syntax which is invalid

3. Given this controller code snippet:

def create
  if @post.save
    flash[:notice] = "Post created!"
    redirect_to posts_path
  else
    flash[:alert] = "Error creating post"
    render :new
  end
end

What will happen to the flash messages if the post fails to save?

medium

A. The notice message will be shown on the posts index page

B. The alert message will be shown on the new post form page

C. No flash message will be shown because render does not keep flash

D. Both notice and alert messages will be shown on the new page

Solution

1. Step 1: Understand flash behavior with redirect and render

   Flash messages persist for one request. Redirect clears flash after showing it. Render keeps the current request, so flash remains.

2. Step 2: Analyze code flow on failure

   On failure, flash[:alert] is set and render :new is called, so alert message shows on the new form page.

3. Final Answer:

   The alert message will be shown on the new post form page -> Option B

4. Quick Check:

   flash with render = message shown immediately [OK]

Hint: Flash with render shows message immediately; with redirect, next page [OK]

Common Mistakes:

• Assuming flash clears on render
• Thinking notice shows on failure
• Confusing redirect and render flash behavior

4. Identify the error in this Rails controller code snippet:

def update
  if @user.update(user_params)
    flash[:notice] = "Profile updated"
    render redirect_to profile_path
  else
    flash[:alert] = "Update failed"
    redirect_to edit_profile_path
  end
end

medium

A. Using render with redirect_to together is incorrect syntax

B. flash[:notice] should be flash.notice

C. redirect_to cannot be used inside an if statement

D. flash messages must be set after redirect_to

Solution

1. Step 1: Check render and redirect usage

   In Rails, render and redirect_to are separate methods. You cannot combine them like render redirect_to.

2. Step 2: Identify correct usage

   To redirect, use redirect_to path. To render a template, use render :template_name. Mixing both causes syntax error.

3. Final Answer:

   Using render with redirect_to together is incorrect syntax -> Option A

4. Quick Check:

   render and redirect_to are separate calls [OK]

Hint: Use either render or redirect_to, never both together [OK]

Common Mistakes:

• Combining render and redirect_to
• Using dot notation for flash
• Setting flash after redirect instead of before

5. You want to show a flash message that persists for the current and the next request (for example, after a redirect and then another page load). Which method should you use in Rails?

hard

A. Use flash.now to set the message

B. Use flash.delete to save the message

C. Use flash.clear to keep the message

D. Use flash.keep to preserve the flash for another request

Solution

1. Step 1: Understand flash persistence

   By default, flash messages last for one request. flash.now shows message only for current request.

2. Step 2: Use flash.keep to extend flash life

   flash.keep preserves the flash message for an additional request, so it appears again after redirect.

3. Final Answer:

   Use flash.keep to preserve the flash for another request -> Option D

4. Quick Check:

   flash.keep extends flash life beyond one request [OK]

Hint: Use flash.keep to keep flash message for next request too [OK]

Common Mistakes:

• Using flash.now which lasts only current request
• Confusing flash.clear with preserving messages
• Using flash.delete which removes messages