mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-14 00:35:46 +01:00
Kaj Kowalski
cd05fc8648
- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills) - Change typescript to tsx for code blocks with JSX - Replace ellipsis (...) in array examples with valid syntax - Separate CSS from TypeScript into distinct code blocks - Convert JavaScript object examples to valid JSON in docs - Fix enum definitions with proper comma separation
993 B
993 B
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Hoist Static JSX Elements | LOW | avoids re-creation | rendering, jsx, static, optimization |
Hoist Static JSX Elements
Extract static JSX outside components to avoid re-creation.
Incorrect (recreates element every render):
function LoadingSkeleton() {
return <div className="animate-pulse h-20 bg-gray-200" />;
}
function Container() {
return <div>{loading && <LoadingSkeleton />}</div>;
}
Correct (reuses same element):
const loadingSkeleton = <div className="animate-pulse h-20 bg-gray-200" />;
function Container() {
return <div>{loading && loadingSkeleton}</div>;
}
This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
Note: If your project has React Compiler enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.