React Machine Coding Practice Questions

🟢 Beginner Level (Core Concepts)

State & Props

1. Counter App - Build increment/decrement counter with reset functionality
2. Todo List - Add, delete, mark complete/incomplete todos
3. User Profile Card - Display user info passed as props with edit functionality
4. Shopping Cart - Add items, update quantities, calculate total
5. Form Validation - Handle input validation with error messages

Event Handling & Conditional Rendering

6. Toggle Switch - Light/dark theme toggler with visual feedback
7. Show/Hide Password - Password input with visibility toggle
8. Modal Component - Open/close modal with backdrop click to close
9. Accordion - Expandable/collapsible content sections
10. Tab Component - Switch between multiple content tabs

🟡 Intermediate Level (Hooks & Advanced Patterns)

Custom Hooks

11. useLocalStorage Hook - Custom hook for localStorage management
12. useFetch Hook - Reusable data fetching with loading/error states
13. useDebounce Hook - Debounced search input implementation
14. useCounter Hook - Reusable counter logic with min/max bounds
15. useToggle Hook - Boolean state toggle functionality

useEffect & Side Effects

16. Weather App - Fetch weather data based on user location
17. Live Clock - Display current time with auto-update
18. Infinite Scroll - Load more content as user scrolls
19. Auto-save Form - Save form data automatically every few seconds
20. Window Resize Tracker - Track and display window dimensions

useReducer & Complex State

21. Shopping Cart with Reducer - Complex cart operations using useReducer
22. Quiz App - Multiple questions with score calculation
23. Undo/Redo Functionality - Text editor with history management
24. Multi-step Form - Wizard-style form with validation
25. Game State Manager - Tic-tac-toe or simple game logic

🟠 Advanced Level (Performance & Patterns)

Performance Optimization

26. Virtualized List - Render large lists efficiently
27. Memoized Search - Search with React.memo and useMemo
28. Optimized Image Gallery - Lazy loading with intersection observer
29. Debounced API Search - Search suggestions with API calls
30. Heavy Computation - Use useMemo for expensive calculations

Context API & State Management

31. Theme Provider - Global theme management with Context
32. User Authentication - Login/logout with protected routes
33. Multi-language App - Internationalization with Context
34. Shopping App - Global cart state across components
35. Notification System - Global toast/alert management

Advanced Patterns

36. Higher-Order Component - Create reusable HOC for logging/auth
37. Render Props Pattern - Build flexible, reusable components
38. Compound Components - Design API like Accordion with multiple sub-components
39. Portal Component - Render modals/tooltips outside component tree
40. Error Boundary - Catch and handle component errors gracefully

🔴 Expert Level (Real-world Applications)

Full Applications

41. Kanban Board - Drag & drop task management (use react-beautiful-dnd)
42. Chat Application - Real-time messaging interface
43. File Explorer - Navigate folders, create/delete files
44. Calendar Component - Month/week/day views with event management
45. Data Table - Sortable, filterable, paginated table

Advanced Features

46. Code Editor - Syntax highlighting and basic editing features
47. Drawing Canvas - Interactive drawing with different tools
48. Photo Editor - Basic image manipulation (crop, filters)
49. Music Player - Play/pause, playlist, progress bar
50. Dashboard - Multiple widgets with drag-and-drop layout

🎯 Concept Coverage Checklist

✅ Core React Concepts

• JSX and Components
• Props and State
• Event Handling
• Conditional Rendering
• Lists and Keys
• Forms and Controlled Components

✅ Hooks Mastery

• useState, useEffect
• useContext, useReducer
• useMemo, useCallback
• useRef, useImperativeHandle
• Custom Hooks

✅ Advanced Patterns

• Higher-Order Components
• Render Props
• Compound Components
• Error Boundaries
• Portals

✅ Performance & Optimization

• React.memo
• useMemo and useCallback
• Code Splitting
• Lazy Loading
• Virtual Scrolling

✅ State Management

• Local State
• Context API
• useReducer for complex state
• Third-party libraries (Redux, Zustand)

📚 Practice Tips

1. Start Simple: Begin with basic counter/todo apps
2. Build Incrementally: Add features one by one
3. Focus on One Concept: Don't try to learn everything at once
4. Code Without Tutorials: Try implementing before looking up solutions
5. Refactor Often: Improve your code structure as you learn
6. Test Your Components: Write basic tests for critical functionality
7. Use TypeScript: Add type safety to your practice projects
8. Deploy Your Projects: Use Vercel/Netlify to showcase your work

🚀 Progression Path

Week 1-2: Questions 1-15 (Master basics and hooks) Week 3-4: Questions 16-30 (Advanced hooks and patterns)
Week 5-6: Questions 31-40 (Performance and architecture) Week 7-8: Questions 41-50 (Full applications and expert level)

Remember: The goal isn't to complete all questions quickly, but to understand the underlying concepts deeply. Take time to experiment, break things, and rebuild them better!