Forem: Anthony Allename

Fixing Page Freeze After Closing a shadcn/ui Dialog, Sheet, DropdownMenu, and Popover in React

Anthony Allename — Fri, 24 Oct 2025 10:23:08 +0000

I've been using shadcn/ui for a while now, and I’ve got to say it’s an incredible tool for building clean, accessible interfaces in React. However, I recently ran into an annoying issue: the page freezes after interacting with certain components like Dialog, Dropdown Menu, Sheet, or Popover usually right after they close. The only way to get things working again was to refresh the page.

If this sounds familiar, don’t worry you’re not alone. In this article, I’ll walk you through why this happens and how to fix it so your app runs smoothly without needing a page reload. Let’s dive in!

Why the Page Freezes After Closing a Dialog

The Dialog component from shadcn/ui (built on top of Radix UI) traps focus inside the modal for accessibility reasons. When the dialog closes, focus should return to the previously focused element.

However, your page may freeze or stop responding if the dialog remains mounted in the DOM even after closing.

Fixing the Page Freeze

To fix the page freeze, all you need to do is add modal={false} on your dialog component

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function DialogFreezeFix () {
return (
    <Dialog> // add it here
      <form>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4">
            <div className="grid gap-3">
              <Label htmlFor="name-1">Name</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="grid gap-3">
              <Label htmlFor="username-1">Username</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  )
}

After adding it, you'll have something like this:

<Dialog modal={false}> // there you go
      <form>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4">
            <div className="grid gap-3">
              <Label htmlFor="name-1">Name</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="grid gap-3">
              <Label htmlFor="username-1">Username</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>

This also works for the DropdownMenu, Sheet, and Popover components.

Handling it with a state

You can also ensure it is handled by managing the state of the component:

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function DialogFreezeFix () {
const [open, setOpen] = useState(false);

return (
    <Dialog 
      open={open} 
      onOpenChange={setOpen} 
      modal={false} // ensure you still include the modal prop
    >
     <form>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4">
            <div className="grid gap-3">
              <Label htmlFor="name-1">Name</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="grid gap-3">
              <Label htmlFor="username-1">Username</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  )
}

Conclusion

The freezing issue usually stems from an uncontrolled dialog lifecycle or focus trap.
By managing open state and modal prop explicitly and ensuring proper unmounting, your page will stay smooth and responsive even after the dialog closes.

If you found this helpful, drop a ❤️ on Dev.to and also follow on LinkedIn.

Automating React App Deployment to GitHub Pages using GitHub Actions

Anthony Allename — Mon, 20 Oct 2025 09:15:02 +0000

I was working on my new portfolio and didn’t want to use Vercel like everyone else. I realized there must be other people who want to try something different, so I decided to deploy my React app to GitHub Pages and automate the process using GitHub Actions. If you're looking for an easy and automated way to deploy your app whenever you push changes, this method is perfect.

Instead of manually deploying your app using npm run deploy, you can set up GitHub Actions to automate the process. This way, every time you push to your repository, GitHub will automatically build and deploy the app to GitHub Pages. Let's walk through setting this up!

Step 1: Install the gh-pages package

gh-pages is a small tool that makes it easy to publish files to GitHub Pages directly from your repo.

Run this command inside your project:

npm install --save-dev gh-pages

Step 2: Set up GitHub Actions Workflow

First, create a GitHub Actions workflow file in your repository. This file will define the process for building and deploying your app.

In your project, create a .github/workflows directory, then inside it, create a file named deploy.yml.

name: Deploy React App to GitHub Pages

on:
  push:
    branches:
      - main  # or any branch you want to deploy from

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 22  # You can use any Node.js version

      - name: Install dependencies
        run: npm install

      - name: Build the app
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-gh-pages@v2
        with:
          personal_token: ${{ secrets.GITHUB_TOKEN }}
          branch: gh-pages  # this is where the app will be deployed
          folder: build  # this is the folder that contains the production build

Your GITHUB_TOKEN should already be defined in your .env file

Step 3: Set up the Homepage in `package.json`

In your package.json, add the homepage field to point to your GitHub Pages URL:

"homepage": "https://<your-username>.github.io/<your-repo-name>"

This ensures that React knows the correct base path when building assets.

Step 4: Push Changes and Automate Deployment

Now that you’ve set up the GitHub Actions workflow, the next step is to push your changes to GitHub:

git add .
git commit -m "Set up GitHub Actions for deployment"
git push origin main

Once pushed, GitHub will automatically trigger the GitHub Actions workflow defined in deploy.yml. It will:

Checkout the code,
Install dependencies,
Build the React app,
Deploy it to the gh-pages branch.

Step 5: Enable GitHub Pages

To make your app live on GitHub Pages:

Go to the Settings tab of your repository.
Scroll down to GitHub Pages under the "Pages" section.
Select gh-pages as the source branch.
Save the changes.

GitHub will now serve your app at https://<your-username>.github.io/<your-repo-name>.

Conclusion

With GitHub Actions, deploying your React app to GitHub Pages becomes a fully automated process. No more manual npm run deploy or updating branches. Simply push to your repository, and GitHub Actions will handle the build and deployment process for you.

This method is ideal for those who want a simple, free, and automated deployment setup for their React projects. You can set this up in minutes, and every time you push to your repository, your app is automatically built and deployed. Perfect for portfolios, demos, or small projects.

Mastering the UI/Logic (Container/Presentation) Pattern in React With Hooks, Headless Components, and My Beloved Zustand

Anthony Allename — Wed, 13 Aug 2025 11:01:58 +0000

When I first started writing React, my components were messy. They handled fetching data, rendering the UI, and random business rules all in one place. Over time, these components got harder to read and even harder to maintain.

Then I learned the UI/Logic pattern, also called the Container/Presentation pattern, and it completely changed the way I structure React projects.

Here is the basic idea:

Presentation (UI): Components that focus only on what things look like. They take props in and render output.
Container (Logic): Components or hooks that handle how things work. They fetch data, manage state, run side effects, and pass ready-to-render props to the UI components.

Think of it like a stage play. The UI is the set design and costumes. The Logic is the script and the director. Each has a clear role, and together they put on a smooth show.

Why separate UI and Logic

Splitting responsibilities makes your code easier to test, reuse, and maintain.

Testability: UI components can be tested with mock props. Logic can be tested without a DOM.
Reusability: The same UI can be connected to different logic sources.
Maintainability: You can change the data source without touching the markup, or change the markup without touching the data source.

When I refactored a messy dashboard this way, code reviews went from tense to relaxed because changes were smaller and easier to follow.

Level 1 — Custom hooks as the Logic layer

Hooks are a natural fit for the Logic layer. They handle fetching, state, and effects while returning a clean API to the UI layer.

function useUsers() {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(data => setUsers(data))
      .finally(() => setLoading(false));
  }, []);

  return { users, loading };
}

function UserList({ users, loading }) {
  if (loading) return <p>Loading…</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

export default function UsersPanel() {
  const { users, loading } = useUsers();
  return <UserList users={users} loading={loading} />;
}

Level 2 — Headless loader components

When you need reusable lifecycle handling like loading states and retries, a headless loader works well. It holds all the logic and lets the UI decide how to render.

function ItemsLoader({ children }) {
  const [state, setState] = React.useState({ loading: true, error: null, items: [] });

  React.useEffect(() => {
    fetch("/api/items")
      .then(res => res.json())
      .then(items => setState({ loading: false, error: null, items }))
      .catch(err => setState({ loading: false, error: err, items: [] }));
  }, []);

  return children(state);
}

function ItemsPanel() {
  return (
    <ItemsLoader>
      {({ loading, error, items }) => {
        if (loading) return <p>Loading…</p>;
        if (error) return <p>Error loading items</p>;
        return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
      }}
    </ItemsLoader>
  );
}

Level 3 — Context for logic distribution

Context is a great way to share logic across the app without heavy prop drilling. The UI stays simple because it only receives the props it needs.

const CounterCtx = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = React.useState(0);
  const value = { count, inc: () => setCount(c => c + 1), dec: () => setCount(c => c - 1) };
  return <CounterCtx.Provider value={value}>{children}</CounterCtx.Provider>;
}

function CounterReadout({ value }) {
  return <h4>Count: {value}</h4>;
}

function CounterButtons({ onInc, onDec }) {
  return (
    <div>
      <button onClick={onInc}>+</button>
      <button onClick={onDec}>-</button>
    </div>
  );
}

function CounterPanel() {
  const { count, inc, dec } = React.useContext(CounterCtx);
  return (
    <>
      <CounterReadout value={count} />
      <CounterButtons onInc={inc} onDec={dec} />
    </>
  );
}

Level 4 — My favorite: Zustand-powered logic

I am a big fan of Zustand. It is lightweight, easy to use, and makes it simple to keep Logic separate from UI without unnecessary boilerplate.

import create from "zustand";

const useUserStore = create(set => ({
  users: [],
  loading: false,
  error: null,
  fetchUsers: async () => {
    set({ loading: true, error: null });
    try {
      const res = await fetch("/api/users");
      const data = await res.json();
      set({ users: data, loading: false });
    } catch (err) {
      set({ error: err.message, loading: false });
    }
  },
}));

function UserList({ users, loading, error, onReload }) {
  if (loading) return <p>Loading…</p>;
  if (error) return <p>{error} <button onClick={onReload}>Retry</button></p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

function UsersPanel() {
  const { users, loading, error, fetchUsers } = useUserStore();

  React.useEffect(() => { fetchUsers(); }, [fetchUsers]);

  return (
    <>
      <h3>Zustand-Powered Users</h3>
      <UserList users={users} loading={loading} error={error} onReload={fetchUsers} />
    </>
  );
}

Conclusion

The UI/Logic pattern is not about following some outdated rule. It is about making your code easier to read, easier to test, and easier to change.

Logic layers can be hooks, headless components, context providers, or Zustand stores. They handle the how.

UI layers handle the what. They render whatever they are told with no hidden side effects.

Once you start separating these concerns, you will see cleaner pull requests, faster feature development, and fewer “where does this go” moments in your day.

For me, pairing this pattern with Zustand is the sweet spot. It keeps things simple, predictable, and enjoyable to work on.

Forem: Anthony Allename

Fixing Page Freeze After Closing a shadcn/ui Dialog, Sheet, DropdownMenu, and Popover in React

Why the Page Freezes After Closing a Dialog

Fixing the Page Freeze

Handling it with a state

Conclusion

Automating React App Deployment to GitHub Pages using GitHub Actions

Step 1: Install the gh-pages package

Step 2: Set up GitHub Actions Workflow

Step 3: Set up the Homepage in package.json

Step 4: Push Changes and Automate Deployment

Step 5: Enable GitHub Pages

Conclusion

Mastering the UI/Logic (Container/Presentation) Pattern in React With Hooks, Headless Components, and My Beloved Zustand

Why separate UI and Logic

Level 1 — Custom hooks as the Logic layer

Level 2 — Headless loader components

Level 3 — Context for logic distribution

Level 4 — My favorite: Zustand-powered logic

Conclusion

Step 3: Set up the Homepage in `package.json`