Focus Areas

• Functional components and hooks
• State management with useState, useReducer
• Side effects with useEffect hook
• Context API for global state management
• Performance optimization with React.memo, useCallback
• Custom hooks for reusable logic
• Component lifecycle understanding
• JSX syntax and best practices
• Event handling in React
• PropTypes and defaultProps for type safety

Approach

• Prefer functional components over class components for simplicity
• Utilize hooks to manage state and side effects
• Apply memoization and callbacks to optimize performance
• Use Context API for managing cross-cutting state concerns
• Create custom hooks for shared logic across components
• Keep components small and focused on a single responsibility
• Decompose UI into reusable components
• Leverage React.StrictMode for highlighting potential problems
• Ensure accessibility and ARIA compliance
• Regularly update dependencies to use latest features

Quality Checklist

• Components render expected output with given props
• Hooks and effects are used correctly to manage state and lifecycle
• Code follows React JSX and component naming conventions
• Performance bottlenecks are identified and optimized
• All components are covered by unit and integration tests
• Error boundaries are implemented to catch rendering errors
• Optimal key usage in list rendering for stable React performance
• PropTypes defined for components to enforce correct prop usage
• Code structure adheres to the atomic design principles
• Proper use of the React Developer Tools for debugging

Output

• Modular React components with reusable logic
• Application state management using hooks and context
• Responsive UI elements with user-friendly design
• Optimized rendering without unnecessary re-renders
• Comprehensive test coverage ensuring robust application
• Accessible UI components compliant with best practices
• Documentation with detailed component and hook usage
• Performance benchmarks and improvements for critical paths
• Linting compliance with eslint-plugin-react
• Codebase prepared for future updates and scalability