Initial commit

skills/optimizing-with-react-compiler/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: optimizing-with-react-compiler
+description: Teaches what React Compiler handles automatically in React 19, reducing need for manual memoization. Use when optimizing performance or deciding when to use useMemo/useCallback.
+allowed-tools: Read, Write, Edit
+version: 1.0.0
+---
+
+# React Compiler Awareness
+
+React Compiler (available separately) automatically memoizes code, reducing need for manual optimization. (verify use in project before using this skill)
+
+## What React Compiler Handles
+
+**Automatically memoizes:**
+
+- Component re-renders
+- Expensive calculations
+- Function references
+- Object/array creation
+
+**Before (Manual Memoization):**
+
+```javascript
+function Component({ items }) {
+  const sortedItems = useMemo(() => {
+    return [...items].sort((a, b) => a.name.localeCompare(b.name));
+  }, [items]);
+
+  const handleClick = useCallback(() => {
+    console.log('Clicked');
+  }, []);
+
+  return <List items={sortedItems} onClick={handleClick} />;
+}
+```
+
+**After (React Compiler):**
+
+```javascript
+function Component({ items }) {
+  const sortedItems = [...items].sort((a, b) => a.name.localeCompare(b.name));
+
+  const handleClick = () => {
+    console.log('Clicked');
+  };
+
+  return <List items={sortedItems} onClick={handleClick} />;
+}
+```
+
+## When Manual Memoization Still Needed
+
+**Keep `useMemo` when:**
+
+- Extremely expensive calculations (> 100ms)
+- Third-party libraries require stable references
+- React Profiler shows specific performance issues
+
+**Keep `React.memo` when:**
+
+- Component re-renders are very expensive
+- Props rarely change but parent re-renders often
+- Verified performance improvement with Profiler
+
+## Performance Best Practices
+
+**Do:**
+
+- Trust React Compiler for most optimizations
+- Keep components small and focused
+- Keep state local
+- Use children prop pattern
+
+**Don't:**
+
+- Add premature memoization
+- Over-engineer performance
+- Skip measuring actual impact
+
+For comprehensive React Compiler information, see: `research/react-19-comprehensive.md` lines 1179-1223.