Session in Storage, Not on Screen

Authentication

This browser already has a saved session (the hint says so), but the workspace stays empty until you refresh — and even then it may not load. Fix hydration so stored auth shows up on first paint.

After you fix it

On load, when storage reports a saved session, the workspace should show the user.
You should not need a manual refresh to see Jordan Lee's workspace.
The empty state should only appear when there is truly no saved session.

import { useState, useEffect } from "react";

const STORAGE_KEY = "acme_session";

function readSession() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch {
    return null;
  }
}

function Workspace({ session }) {
  const [snapshot] = useState(session);

  if (!snapshot) {
    return <p data-testid="workspace-empty" style={styles.empty}>No workspace loaded</p>;
  }
  return (
    <div data-testid="workspace-ready">
      <h2 style={styles.h2}>Welcome back, {snapshot.name}</h2>
      <p style={styles.role}>{snapshot.role} workspace</p>
    </div>
  );
}

export default function App() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    const b = document.body;
    const pb = b.style.background;
    const pm = b.style.margin;
    b.style.background = "#fafafa";
    b.style.margin = "0";
    if (!localStorage.getItem(STORAGE_KEY)) {
      localStorage.setItem(
        STORAGE_KEY,
        JSON.stringify({ name: "Jordan Lee", role: "Admin" })
      );
    }
    setSession(readSession());
    return () => {
      b.style.background = pb;
      b.style.margin = pm;
    };
  }, []);

  const stored = readSession();

  return (
    <div style={styles.page}>
      <div style={styles.card}>
        <h1 style={styles.h1}>Acme Workspace</h1>
        <p data-testid="storage-hint" style={styles.hint}>
          {stored ? "Saved session found in this browser" : "No saved session"}
        </p>
        <Workspace session={session} />
      </div>
    </div>
  );
}

const styles = {
  page: { display: "flex", justifyContent: "center", padding: "48px 20px", fontFamily: "'Segoe UI', system-ui, sans-serif" },
  card: { background: "#fff", borderRadius: 14, padding: "28px 30px", width: "100%", maxWidth: 400, boxShadow: "0 1px 3px rgba(0,0,0,0.08)" },
  h1: { margin: "0 0 10px", fontSize: 20, fontWeight: 700 },
  hint: { margin: "0 0 16px", fontSize: 12, color: "#666" },
  h2: { margin: "0 0 6px", fontSize: 18, fontWeight: 600 },
  role: { margin: 0, fontSize: 14, color: "#666" },
  empty: { margin: 0, fontSize: 14, color: "#888" },
};

Open Sandbox