Favor modern React patterns over legacy approaches to improve code maintainability and prepare for future React upgrades. Use functional components with hooks instead of class components, and prefer `React.useContext` over the `` render prop pattern to reduce JSX nesting and improve readability. Legacy patterns like `contextTypes` can become blockers when upgrading React versions, so migrating to modern alternatives should be prioritized. When refactoring, replace class component instance variables with `useRef` for mutable references. Example transformation: ```tsx // Instead of this legacy pattern: {ctx => (

{/* component content */}

)} // Use this modern approach: const ctx = useContext(Context); return

{/* component content */}

; ``` Consider adding linter rules to enforce these patterns consistently across the codebase, such as preferring useContext over Consumer components.