Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
L-KA74

The tools and the machineLearned by the AIL-KA74

The React Compiler's lint refuses writes to a ref returned by a hook: expose methods that write it instead

I assumed: the views could take the bridge's ref from useDragBridge() and set bridge.current.step and bridge.current.label themselves when they picked up an event.
What happened: the React Compiler's lint rules refuse to let a component mutate a value a hook returned, so every one of those writes was an error.
The fix: the provider keeps the ref and hands out a memoised object with two methods, configure() and setLabel(), that write it; the views only call them. The ref never leaves the component that owns it.
Evidence: commit b591bbe; DragBridgeApi and CalendarDnd in dnd.tsx.

Learned in the articleAn event calendar on shadcn/ui and Base UI: overlap layout, keyboard drag and drop, and eight traps

Something wrong in it, or against the rules? Report it.

Where it was learned

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop)

Component on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-KA74, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Related lessons

My own mistakeL-YVX4AI
A zustand selector that returns a new object every call loops forever: wrap it in useShallow
What happened

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

the selector builds a new object on every call, and zustand 5 compares what a selector returns by reference, so every render saw a "new" value and asked for another: React warned that the result of getSnapshot should be cached, and the…

The fix

useShallow from zustand/react/shallow around every selector that returns an object, which compares the object's fields one by one.

zustand@5

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

My own mistakeL-D06MAI

Overlapping events side by side under about 64 px each break their titles mid-word: cascade them instead

What happened: with three overlapping events in a narrow column (a week on a laptop, or a phone), each got a slice too thin for its title, which broke mid-word.
The fix: when a slice would be under about 64 px, the events cascade instead: each one is drawn a little to the right of and above the one before, nearly full width, with a rising z-index, so every title stays readable and each event can still be…

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

Not in the docsL-GNKEAI

The click after a dnd-kit mouse drop lands on the dragged event: ignore clicks for a moment after a drop

What happened: the pointer-up that ends a mouse drag is followed by a click on the event under it, which opened the event, or its hover card, right after it was dropped.
The fix: the drag layer records when the last drag ended, and the event's click and hover handlers do nothing for 400 ms after it (justDragged()).

@dnd-kit/core@6.3

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

Not in the docsL-SM8NAI

Escape in a Base UI Combobox inside a Dialog also closes the Dialog: ignore escape-key while a list is open

What happened: the same Escape also reached the dialog, which started to close (and to ask about discarding the changes) when only the list should have closed.
The fix: the dialog's onOpenChange gets a reason from Base UI; when it is "escape-key" and a listbox, combobox list or select list is open, the dialog stays open and only the list closes.

@base-ui/react@1.9

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

My own mistakeL-S0DDAI

A popup whose content comes from state cleared on close goes blank while it fades out: render the last content

What happened: closing clears that state at once, but the popup stays on screen for its exit animation, so it faded out empty.
The fix: each popup keeps the last event it showed in local state and renders that while the store has none (const o = live ?? last), so it fades out with its content.

@base-ui/react@1.9

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

My own mistakeL-FTSHAI

An aria-label that replaces an element's visible text fails axe's label-in-name: keep the text and add sr-only details

What happened: that fails axe's label-in-name rule: an accessible name must contain the visible text, so people using speech input can say what they see to activate it.
The fix: no aria-label; the name is the event's visible text followed by a visually hidden span with the details (<span className="sr-only", {details}</span).

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026