← Back to academy

2-4 weeks

React Coding Loop

Hooks, components, state machines, forms, and debugging drills.

Audience

React engineers who need live-coding speed plus senior narration.

Outcome

Implement, debug, and explain React product behavior without hiding uncertainty in effects or booleans.

Practice Items

80 questions

Format Mix

UI Component · 20 Debugging · 40 React App · 19 React Hook · 1

Practice Sequence

01Build an accessible modal dialogShows whether you can build components as interaction systems rather than visual boxes.UI ComponentMid45m 02Review a broken accessible modal dialogTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingMid35m 03Build a combobox autocompleteShows whether you can build components as interaction systems rather than visual boxes.UI ComponentMid45m 04Review a broken combobox autocompleteTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingMid35m 05Build a multi-select listboxShows whether you can build components as interaction systems rather than visual boxes.UI ComponentMid45m 06Review a broken multi-select listboxTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingMid35m 07Build a sortable data tableShows whether you can build components as interaction systems rather than visual boxes.UI ComponentMid45m 08Review a broken sortable data tableTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingMid35m 09Build a virtualized feedShows whether you can build components as interaction systems rather than visual boxes.UI ComponentMid45m 10Review a broken virtualized feedTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingMid35m 11Build a file explorer treeShows whether you can build components as interaction systems rather than visual boxes.UI ComponentMid45m 12Review a broken file explorer treeTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingMid35m 13Build a toast notification systemShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 14Review a broken toast notification systemTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 15Build a tabs with keyboard navigationShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 16Review a broken tabs with keyboard navigationTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 17Build an accordion with preserved focusShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 18Review a broken accordion with preserved focusTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 19Build a popover menuShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 20Review a broken popover menuTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 21Build an image carouselShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 22Review a broken image carouselTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 23Build a drag and drop reorder listShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 24Review a broken drag and drop reorder listTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 25Build a form wizardShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 26Review a broken form wizardTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 27Build a date range pickerShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 28Review a broken date range pickerTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 29Build a command paletteShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 30Review a broken command paletteTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 31Build a resizable split paneShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 32Review a broken resizable split paneTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 33Build an inline editable textShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 34Review a broken inline editable textTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 35Build an infinite scroll listShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 36Review a broken infinite scroll listTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 37Build a responsive navigation shellShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 38Review a broken responsive navigation shellTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 39Build a status timelineShows whether you can build components as interaction systems rather than visual boxes.UI ComponentSenior60m 40Review a broken status timelineTests senior review instincts: behavior, state ownership, accessibility, and tests.DebuggingSenior35m 41Implement useState derivation in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppMid40m 42Debug useState derivation under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 43Implement useEffect cleanup in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppMid40m 44Debug useEffect cleanup under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 45Implement useReducer state machines in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppMid40m 46Debug useReducer state machines under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 47Implement useMemo and useCallback boundaries in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppMid40m 48Debug useMemo and useCallback boundaries under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 49Implement custom useQuery hook in a product componentShows whether you can explain React behavior while building maintainable product UI.React HookMid40m 50Debug custom useQuery hook under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 51Implement optimistic updates in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppMid40m 52Debug optimistic updates under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 53Implement external store subscription in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppMid40m 54Debug external store subscription under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 55Implement context performance in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppMid40m 56Debug context performance under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 57Implement controlled forms in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 58Debug controlled forms under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 59Implement server state versus client state in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 60Debug server state versus client state under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 61Implement Suspense loading boundaries in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 62Debug Suspense loading boundaries under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 63Implement error boundaries in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 64Debug error boundaries under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 65Implement transition-driven filtering in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 66Debug transition-driven filtering under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 67Implement virtualized rendering in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 68Debug virtualized rendering under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 69Implement compound components in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 70Debug compound components under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 71Implement render props versus hooks in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 72Debug render props versus hooks under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 73Implement React key stability in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 74Debug React key stability under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 75Implement hydration mismatch debugging in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 76Debug hydration mismatch debugging under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 77Implement component API design in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 78Debug component API design under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m 79Implement state colocation refactor in a product componentShows whether you can explain React behavior while building maintainable product UI.React AppSenior55m 80Debug state colocation refactor under interview pressureTests whether you debug from ownership and lifecycle instead of random dependency-array edits.DebuggingSenior35m