Day 77: Fixing React Hydration & AWS SES Identities

Source: Dev.to

The React Avatar Flash

I had a classic data hydration issue. When a user logged in, React synchronously rendered a default avatar, waited ~200 ms for DynamoDB to return the real profile picture URL, and then aggressively snapped the new image into place.

Fix: Stop rendering placeholders while in a loading state. The component now leaves the avatar space as a clean white circle when !isAvatarLoading. Combined with localStorage caching, returning users get instant loads, and new users see a clean experience without jarring layout shifts.

// Example React avatar component
import React, { useEffect, useState } from 'react';

function Avatar({ userId }) {
  const [avatarUrl, setAvatarUrl] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const cached = localStorage.getItem(`avatar-${userId}`);
    if (cached) {
      setAvatarUrl(cached);
      setIsLoading(false);
      return;
    }

    fetch(`/api/users/${userId}/profile`)
      .then(res => res.json())
      .then(data => {
        setAvatarUrl(data.avatarUrl);
        localStorage.setItem(`avatar-${userId}`, data.avatarUrl);
      })
      .finally(() => setIsLoading(false));
  }, [userId]);

  return (
    {isLoading ? (
      // placeholder (e.g., empty circle)
    ) : (
      // render <img src={avatarUrl} alt="User avatar" />
    )}
  );
}

The Robot Email in AWS SES

My Python Lambda was sending daily reports via SES using:

Source = "ai@duromoney.com"

While technically correct, the emails looked untrustworthy in inboxes.

Fix: Include a friendly sender name in the Source field:

Source = "DuroAI <ai@duromoney.com>"

Gmail and Outlook now display “DuroAI” as the sender name. I also used this opportunity to wire up an event‑driven welcome email. When a user’s profile is saved for the first time in DynamoDB, the Lambda router intercepts the payload and triggers a custom SES welcome template.

import boto3

ses = boto3.client('ses')

def send_welcome_email(user_email, user_name):
    response = ses.send_email(
        Source="DuroAI <ai@duromoney.com>",
        Destination={'ToAddresses': [user_email]},
        Message={
            'Subject': {'Data': f'Welcome, {user_name}!'},
            'Body': {
                'Html': {'Data': f'''
## Hello {user_name}

Welcome to DuroAI.
''' }
            }
        },
        ReplyToAddresses=['support@duromoney.com']
    )
    return response

The result is a more trustworthy appearance and a smoother onboarding experience.