codecruise 0.1.0

package/config/agents/stack/expo/rules/performance.md

@@ -0,0 +1,415 @@
+# Performance Rules - React Native
+
+Optimization patterns for smooth 60fps apps.
+
+---
+
+## Lists
+
+### PERF-001: Use FlashList for long lists
+
+```typescript
+import { FlashList } from '@shopify/flash-list';
+
+// GOOD - FlashList for 50+ items
+<FlashList
+  data={items}
+  keyExtractor={(item) => item.id}
+  renderItem={({ item }) => <ItemCard item={item} />}
+  estimatedItemSize={80}  // Required! Measure your items
+  contentContainerStyle={{ padding: 16 }}
+/>
+
+// FlatList OK for short lists
+<FlatList
+  data={shortList}  // < 50 items
+  renderItem={renderItem}
+/>
+```
+
+### PERF-002: Optimize list items
+
+```typescript
+import { memo } from 'react';
+
+// Memoize list items
+const ItemCard = memo(function ItemCard({ item, onPress }: Props) {
+  return (
+    <Pressable onPress={() => onPress(item.id)}>
+      <Text>{item.title}</Text>
+    </Pressable>
+  );
+});
+
+// Stable callbacks
+function ItemList() {
+  const handlePress = useCallback((id: string) => {
+    router.push(`/items/${id}`);
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item }) => <ItemCard item={item} onPress={handlePress} />,
+    [handlePress]
+  );
+
+  return (
+    <FlashList
+      data={items}
+      renderItem={renderItem}
+      estimatedItemSize={80}
+    />
+  );
+}
+```
+
+### PERF-003: List configuration
+
+```typescript
+<FlashList
+  data={items}
+  renderItem={renderItem}
+  estimatedItemSize={80}
+
+  // Performance tweaks
+  removeClippedSubviews={true}     // Unmount off-screen items
+  maxToRenderPerBatch={10}         // Batch size
+  windowSize={5}                   // Render window (screens)
+  initialNumToRender={10}          // Initial render count
+
+  // Smooth scrolling
+  maintainVisibleContentPosition={{
+    minIndexForVisible: 0,
+  }}
+/>
+```
+
+---
+
+## Images
+
+### PERF-004: Optimize images
+
+```typescript
+import { Image } from 'expo-image';
+
+// Use expo-image (better caching)
+<Image
+  source={{ uri: imageUrl }}
+  style={{ width: 200, height: 200 }}
+  contentFit="cover"
+  placeholder={blurhash}
+  transition={200}
+  cachePolicy="memory-disk"
+/>
+
+// Resize on upload
+import * as ImageManipulator from 'expo-image-manipulator';
+
+async function resizeImage(uri: string) {
+  const result = await ImageManipulator.manipulateAsync(
+    uri,
+    [{ resize: { width: 800 } }],
+    { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG }
+  );
+  return result.uri;
+}
+```
+
+### PERF-005: Progressive loading
+
+```typescript
+import { Image } from 'expo-image';
+
+// With blurhash placeholder
+<Image
+  source={{ uri: fullImageUrl }}
+  placeholder={item.blurhash}
+  contentFit="cover"
+  transition={300}
+  style={{ width: '100%', aspectRatio: 16/9 }}
+/>
+
+// Generate blurhash on backend, store with image
+```
+
+---
+
+## Rendering
+
+### PERF-006: Avoid re-renders
+
+```typescript
+// BAD - Inline objects/functions
+<View style={{ padding: 16 }}>  {/* New object every render */}
+<Pressable onPress={() => doSomething()}>  {/* New function */}
+
+// GOOD - Stable references
+const styles = StyleSheet.create({ container: { padding: 16 } });
+// Or with NativeWind
+<View className="p-4">
+
+const handlePress = useCallback(() => doSomething(), []);
+<Pressable onPress={handlePress}>
+```
+
+### PERF-007: Memoize computed values
+
+```typescript
+// BAD - Computed every render
+function UserList({ users, filter }) {
+  const filtered = users.filter(u => u.role === filter);  // Every render!
+  return <FlashList data={filtered} ... />;
+}
+
+// GOOD - Memoized
+function UserList({ users, filter }) {
+  const filtered = useMemo(
+    () => users.filter(u => u.role === filter),
+    [users, filter]
+  );
+  return <FlashList data={filtered} ... />;
+}
+```
+
+### PERF-008: Defer expensive operations
+
+```typescript
+import { InteractionManager } from 'react-native';
+
+// Run after animations complete
+function Screen() {
+  useEffect(() => {
+    const task = InteractionManager.runAfterInteractions(() => {
+      // Expensive operation
+      loadHeavyData();
+    });
+
+    return () => task.cancel();
+  }, []);
+}
+
+// Or use startTransition
+import { startTransition } from 'react';
+
+function SearchInput() {
+  const [query, setQuery] = useState('');
+
+  const handleChange = (text: string) => {
+    setQuery(text);  // Urgent - update input
+
+    startTransition(() => {
+      // Non-urgent - can be interrupted
+      setSearchResults(search(text));
+    });
+  };
+}
+```
+
+---
+
+## Animations
+
+### PERF-009: Use native driver
+
+```typescript
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+function AnimatedCard() {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = () => {
+    scale.value = withSpring(0.95);
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  return (
+    <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut}>
+      <Animated.View style={animatedStyle}>
+        <Text>Card</Text>
+      </Animated.View>
+    </Pressable>
+  );
+}
+```
+
+### PERF-010: Avoid layout animations
+
+```typescript
+// BAD - Triggers layout (slow)
+const animatedStyle = useAnimatedStyle(() => ({
+  width: width.value,       // Layout property
+  height: height.value,     // Layout property
+  marginTop: margin.value,  // Layout property
+}));
+
+// GOOD - Transform only (fast, native thread)
+const animatedStyle = useAnimatedStyle(() => ({
+  transform: [
+    { translateX: x.value },
+    { translateY: y.value },
+    { scale: scale.value },
+    { rotate: `${rotation.value}deg` },
+  ],
+  opacity: opacity.value,
+}));
+```
+
+---
+
+## Data Loading
+
+### PERF-011: Prefetch data
+
+```typescript
+import { useQueryClient } from '@tanstack/react-query';
+import { Link } from 'expo-router';
+
+function UserListItem({ user }) {
+  const queryClient = useQueryClient();
+
+  // Prefetch on press-in (before navigation)
+  const handlePressIn = () => {
+    queryClient.prefetchQuery({
+      queryKey: ['user', user.id],
+      queryFn: () => fetchUser(user.id),
+    });
+  };
+
+  return (
+    <Link href={`/users/${user.id}`} asChild>
+      <Pressable onPressIn={handlePressIn}>
+        <Text>{user.name}</Text>
+      </Pressable>
+    </Link>
+  );
+}
+```
+
+### PERF-012: Pagination
+
+```typescript
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+function usePaginatedPosts() {
+  return useInfiniteQuery({
+    queryKey: ['posts'],
+    queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
+    getNextPageParam: (lastPage) => lastPage.nextPage,
+    initialPageParam: 1,
+  });
+}
+
+function PostList() {
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = usePaginatedPosts();
+
+  const posts = data?.pages.flatMap(page => page.items) ?? [];
+
+  return (
+    <FlashList
+      data={posts}
+      renderItem={renderPost}
+      onEndReached={() => hasNextPage && fetchNextPage()}
+      onEndReachedThreshold={0.5}
+      ListFooterComponent={isFetchingNextPage ? <Spinner /> : null}
+      estimatedItemSize={100}
+    />
+  );
+}
+```
+
+---
+
+## Bundle Size
+
+### PERF-013: Tree-shake imports
+
+```typescript
+// BAD - Imports entire library
+import { format } from 'date-fns';
+import _ from 'lodash';
+
+// GOOD - Specific imports
+import format from 'date-fns/format';
+import debounce from 'lodash/debounce';
+```
+
+### PERF-014: Lazy load screens
+
+```typescript
+// Heavy screens loaded on demand
+import { lazy } from 'react';
+
+const HeavyEditor = lazy(() => import('./HeavyEditor'));
+
+function Screen() {
+  const [showEditor, setShowEditor] = useState(false);
+
+  return (
+    <View>
+      <Button onPress={() => setShowEditor(true)}>Open Editor</Button>
+      {showEditor && (
+        <Suspense fallback={<Spinner />}>
+          <HeavyEditor />
+        </Suspense>
+      )}
+    </View>
+  );
+}
+```
+
+---
+
+## Profiling
+
+### PERF-015: Measure performance
+
+```typescript
+// Console timing
+console.time('render');
+// ... operation
+console.timeEnd('render');
+
+// React DevTools Profiler
+import { Profiler } from 'react';
+
+function onRenderCallback(id, phase, actualDuration) {
+  console.log(`${id} ${phase}: ${actualDuration}ms`);
+}
+
+<Profiler id="UserList" onRender={onRenderCallback}>
+  <UserList />
+</Profiler>
+
+// Flipper for detailed profiling
+// Use React Native Performance Monitor
+```
+
+### PERF-016: Monitor in production
+
+```typescript
+// Track slow renders
+import * as Sentry from '@sentry/react-native';
+
+Sentry.init({
+  tracesSampleRate: 0.1,
+  enableAutoPerformanceTracking: true,
+});
+
+// Custom spans
+const transaction = Sentry.startTransaction({ name: 'loadUsers' });
+const span = transaction.startChild({ op: 'fetch' });
+await fetchUsers();
+span.finish();
+transaction.finish();
+```