component-refactor

Refactoring duplicate React components involves extracting common logic into custom hooks and creating a generic base component. Identify repeated state management, side effects, and UI patterns across similar components, then consolidate them into a single parameterized component with props-based configuration for video, modules, progress, and callbacks.

Extract shared logic into custom hooks like useAutoSaveNotes and useModuleProgress, then use a single BaseLearningSystem component configured via props instead of maintaining separate *LearningSystem components. This approach reduces ~800 lines of duplicated code by 80% while standardizing state management and localStorage persistence.

Build a generic BaseLearningSystem component that accepts configuration props for layout, video, modules, and navigation. Extract common UI blocks like Breadcrumb, ProgressBar, and NotesSection into modular subcomponents, and pull repetitive logic into custom hooks to serve multiple learning system variants.

Yes. Custom hooks like useAutoSaveNotes and useModuleProgress encapsulate shared state management and side effects, allowing multiple components to reuse the same logic without duplication. This pattern enables consistent behavior across learning systems while maintaining clean, maintainable code.

No. You can incrementally refactor by extracting one custom hook at a time from your most duplicated components, then consolidate similar components into a single parameterized base component. Start with high-impact patterns like auto-save logic or progress tracking.

A generic base component works best when learning systems share core patterns like video playback, module navigation, and progress tracking. If systems require deeply different layouts or specialized interactions, excessive conditional rendering in props can reduce maintainability; in those cases, extract only the truly shared logic into hooks.