Refactor layout tabs to prevent unnecessary re-renders

[marcodejongh]

Summary

Refactored the tab layout component to improve performance by preventing unnecessary re-renders and better separating concerns. Each tab now manages its own state subscriptions rather than having a single parent component subscribe to all contexts.

Key Changes

• Extracted tab components: Split TabsWrapper into separate memoized components (QueueTabLabel, QueueTabContent, SearchTabContent, HoldsTabContent) to isolate state subscriptions and prevent cascading re-renders
• Optimized queue context usage: QueueTabLabel now directly subscribes to queue context for the badge count, while QueueTabContent handles queue operations independently
• Added memoization: Used useMemo for tabItems array and useCallback for handleClearQueue to prevent unnecessary re-renders when props haven't changed
• Updated dependencies: Changed @playwright/test, @types/react, bufferutil, node-gyp-build, playwright, and playwright-core from dev: true to devOptional: true in package-lock.json. Removed dev: true flag from react, react-dom, and scheduler to make them production dependencies

Implementation Details

• Each tab content component is wrapped with React.memo() and has a displayName for better debugging
• The handleClearQueue callback now captures itemsCleared before clearing the queue to ensure accurate tracking
• Tab items are memoized with boardDetails as the only dependency, reducing re-computation when queue state changes
• This architecture allows the Queue tab to update its badge independently without re-rendering Search and Holds tabs

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
boardsesh	Building		Jan 24, 2026 0:28am

[claude]

Claude Review

✅ Ready to merge - Minor issues noted below, but nothing blocking.

Issues

1. Stale closure in useCallback (layout-client.tsx:46-53): handleClearQueue captures queue.length but recreates on every queue change due to including queue.length in deps. Consider using a ref if you want the memoization benefit, or remove the useCallback since it's already inside a memoized component.

2. package-lock.json changes unrelated to PR goal: Changing playwright/bufferutil from dev to devOptional and removing dev: true from react/react-dom/scheduler appear unrelated to the re-render fix. These should be explained or split into a separate PR.

Notes

• No documentation changes needed (this PR doesn't modify documented systems)
• No tests added, but this is a refactoring with no new features - acceptable