Hiding a sidebar on mobile without a hydration mismatch

Watch everything for $149.

Buy now

Hiding a sidebar on mobile without a hydration mismatch

Use the screen width to seed some React state in a way that's robust to server-side rendering.

Become a member to access this lesson's summary and source code.

Buy a lifetime membership

Get all current and future premium Build UI courses, forever.

We create courses for developers obsessed with pixel-perfect details and modern user interface engineering.

If you've ever cracked open the devtools to inspect Stripe's hero section, implemented a live buffered timeline like Twitter, or recreated your favorite iOS animation in React, Build UI was made for you.

one-time paymentearly-bird price

Watch everything, forever.

What you'll get when you join

Full access to all Build UI videos

Get full access to all of our current and future premium video content.

Private Discord

Ask questions and get answers from Sam, Ryan and other pro members.

Video summaries with code snippets

Easily reference videos with text summaries and copyable code snippets.

Source code

View the source code for every video right on GitHub.

Invoices and receipts

Get reimbursed from your employer for becoming a better coder!