DEV Community

Cover image for Goodbye Rebase Hell: How GitHub Stacked PRs Transformed My Frontend Workflow
zahidkhan-xen
zahidkhan-xen

Posted on

Goodbye Rebase Hell: How GitHub Stacked PRs Transformed My Frontend Workflow

As frontend engineers, velocity and flow are everything. We love getting into the zone: building slick user interfaces, setting up state logic, and connecting API endpoints. But if there’s one thing that consistently breaks that flow, it’s code review bottlenecks and rebase conflicts.Recently, I stumbled upon GitHub’s new Stacked Pull Requests feature. After testing it hands-on on one of my personal projects, I can confidently say it completely shifts how dependent features are built and reviewed.Here is my experience as a frontend engineer, why the old way was broken, and how Stacked PRs solved it.1. The Nightmare of Dependent FeaturesWhen building large features on the frontend, modularity is key. You naturally split your work into logical layers:Layer 1 (Branch A): API calls, data fetching hooks, and state management logic.Layer 2 (Branch B): UI layout, form inputs, and interactive components.Layer 3 (Branch C): Integration tests, page routes, and final styling tweaks.The Old Scenario:In an ideal world, Branch A gets approved and merged immediately. In reality, senior engineers and teammates are busy with meetings or deep work.Because you don't want to lose momentum, you branch Branch B off Branch A.Later, your reviewer leaves feedback on Branch A. You make changes to Branch A and push them. But now, Branch B is outdated.Switching back to Branch B to run git rebase branch-A often triggers a cascading wave of merge conflicts across multiple files. You spend 30 minutes untangling Git commits instead of shipping features.2. Enter GitHub Stacked PRsWhile exploring Git workflow optimizations, I came across GitHub’s Stacked PRs feature—specifically the native "Start a pull request stack" checkbox in the GitHub UI (and the accompanying gh stack CLI extension).I decided to test this workflow on a personal project where I was building a complex dashboard widget requiring sequential layers.3. How the Stacked PR Workflow OperatesWhen creating a pull request for a dependent branch:You create Branch A off main and push your foundational changes.You create Branch B off Branch A and start working immediately.When opening the PR for Branch B on GitHub, you select "Start a pull request stack" (or target Branch A as the base branch).GitHub automatically recognizes the dependency order and links the PRs together in a Stack.The Magic Moment: Automatic Synchronization ✨When changes are requested on Branch A, you update and push to Branch A as usual.Instead of leaving you to manually resolve rebase conflicts on Branch B, GitHub detects the stack updates and automatically provides options to rebase/sync Branch B.GitHub remembers the exact diff boundaries between layers. When Branch A is eventually merged into main, GitHub automatically updates Branch B's base branch to main and applies a cascading rebase!4. Comparing the ApproachesFeature / ChallengeTraditional BranchingGitHub Stacked PRsReview ScopeLarge, overwhelming PRs or waiting for sequential mergesSmall, focused, single-purpose layer PRsDeveloper Waiting TimeHigh (blocked until PR A is merged)Zero (keep building on Branch B immediately)Updating Base CodeManual git rebase / manual conflict resolutionAutomated cascading rebase & stack syncContext SwitchingConstant switching and head-scratching over commit historySeamless Git history managed by GitHub5. Key Lessons & TakeawaysTesting Stacked PRs on my personal project brought three main benefits:Smaller Diffs = Faster Approvals: Teammates review a 100-line UI addition rather than a 1,000-line monolithic PR.Uninterrupted Flow: I never have to stop coding or pause my momentum while waiting for PR feedback.Peace of Mind: No more fear of messing up Git histories or spending hours fixing rebase conflicts across dependent branches.💡 Quick Start Tip for DevelopersIf you prefer using the terminal over the web UI, you can also use GitHub's CLI extension:Bash# Install the stack extension
gh extension install github/gh-stack

Initialize a new stack

gh stack init

Add a layer

gh stack add feature-ui

Submit all stacked PRs at once

gh stack submit
Final ThoughtsGitHub Stacked PRs solve one of the most frustrating pain points in modern software engineering. If you frequently find yourself juggling dependent branches or getting stuck in rebase loops, give Stacked PRs a try on your next project!

Top comments (0)