426bcb188a
- Improved the `DuplicateOrdersDialog` component with better tab navigation for order number and line aggregate views. - Enhanced the data structure for duplicate records to include `totalQuantity` and `totalSellingPrice` for more accurate detection. - Implemented auto-flipping logic to ensure users see relevant content without encountering empty views. - Expanded test coverage for the `findDuplicateOrders` function to validate new matching logic. - Updated documentation to clarify duplicate identification criteria.
1.5 KiB
1.5 KiB
| title | impact | impactDescription | tags |
|---|---|---|---|
| Parallel Data Fetching with Component Composition | CRITICAL | eliminates server-side waterfalls | server, rsc, parallel-fetching, composition |
Parallel Data Fetching with Component Composition
React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
Incorrect (Sidebar waits for Page's fetch to complete):
export default async function Page() {
const header = await fetchHeader()
return (
<div>
<div>{header}</div>
<Sidebar />
</div>
)
}
async function Sidebar() {
const items = await fetchSidebarItems()
return <nav>{items.map(renderItem)}</nav>
}
Correct (both fetch simultaneously):
async function Header() {
const data = await fetchHeader()
return <div>{data}</div>
}
async function Sidebar() {
const items = await fetchSidebarItems()
return <nav>{items.map(renderItem)}</nav>
}
export default function Page() {
return (
<div>
<Header />
<Sidebar />
</div>
)
}
Alternative with children prop:
async function Header() {
const data = await fetchHeader()
return <div>{data}</div>
}
async function Sidebar() {
const items = await fetchSidebarItems()
return <nav>{items.map(renderItem)}</nav>
}
function Layout({ children }: { children: ReactNode }) {
return (
<div>
<Header />
{children}
</div>
)
}
export default function Page() {
return (
<Layout>
<Sidebar />
</Layout>
)
}