perf: Add React Performance Optimizations

[nik-kale]

Summary

This PR optimizes React components to prevent unnecessary re-renders and improve performance, especially with large mission step lists. Implements React.memo, useMemo, and useCallback hooks following React best practices.

Changes

• Wrapped CommandConsole with React.memo:
  • Prevents re-renders when props unchanged
  • Added useCallback for all function handlers
  • Added useMemo for sorted steps array
• Wrapped LiveView with React.memo:
  • Prevents unnecessary re-renders
• Optimized App.tsx:
  • Wrapped handleSubmitMission with useCallback
• Performance improvements:
  • Step icon calculation memoized
  • Status badge rendering memoized
  • Timestamp formatting memoized
  • Steps sorting memoized (prevents recalculation)

Type of Change

• Performance improvement
• New feature
• Bug fix
• Breaking change
• Documentation update

Performance Improvements

Before

• Components re-render every 2 seconds (polling interval)
• Functions recreated on every render
• Steps array recalculated on every render
• No memoization strategy

After

• Components only re-render when data changes
• Functions stable across renders (useCallback)
• Steps sorting cached (useMemo)
• Memoized helper functions prevent recalculation

Optimization Details

React.memo()

Prevents component re-renders when props haven't changed:

export const CommandConsole = memo(function CommandConsole({ ... }) {
  // Component only re-renders if mission, onSubmitMission, or isSubmitting change
});

useCallback()

Sta bilizes function references:

const getStepIcon = useCallback((type: MissionStepType) => {
  // Function identity preserved across renders
}, []);

useMemo()

Caches expensive calculations:

const sortedSteps = useMemo(() => {
  return [...mission.steps].sort((a, b) => ...);
}, [mission?.steps]);

Expected Performance Gains

Scenario	Before	After	Improvement
10 steps	Minor lag	Smooth	✅
50 steps	Noticeable lag	Smooth	✅✅
100+ steps	Significant lag	Smooth	✅✅✅
Polling updates	Full re-render	Minimal	✅✅

Testing

• ✅ No linting errors
• ✅ Components still render correctly
• ✅ Timeline displays properly
• ✅ No functional regressions
• ✅ Props correctly memoized

React DevTools Verification

Can verify with React DevTools Profiler:

1. Enable "Highlight updates when components render"
2. Components flash less frequently
3. Render time reduced in Profiler

Checklist

• Code follows project style guidelines
• Self-review completed
• React best practices followed
• No new warnings introduced
• Dependencies arrays correct
• No functional changes

Related Issues

Addresses Feature #8 from FEATURE_OPPORTUNITIES.md - Priority Score: 2.0

Notes

• React.memo performs shallow prop comparison
• useCallback/useMemo trade memory for performance
• Optimization most noticeable with 50+ mission steps
• No breaking changes - pure performance enhancement

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.