Controlled vs Uncontrolled Components | Development Island

Autoplay
Autocomplete

Previous Lesson Complete and Continue

React 19 Mastery: Advanced Patterns, Performance, Routing, State, Forms & Testing

Advanced React Patterns

Controlled vs Uncontrolled Components (6:49)
Render Props Pattern (5:31)
Compound Components Pattern (10:04)
Higher Order Components (HOCs) (5:27)
Function as Children Pattern (10:02)
Prop Getters & Prop Collections (13:33)
State Reducer Pattern (9:40)
Controlled Props Pattern (7:10)

Optimising React Performance with Memoization, Virtualisation, Suspense, Profiling ...

Introduction to Performance in React (4:48)
React.memo — Memoizing Components (5:43)
Another example using React.memo (4:14)
useCallback — Memoizing Functions (6:41)
useMemo — Memoizing Expensive Calculations (5:32)
React Virtualization (6:01)
Lazy Loading Components (React.lazy + Suspense) (7:21)
Profiling React Apps with React DevTools Profiler (7:48)

Routing & Navigation in React (with React Router 7 / latest React 19 syntax

Introduction to Routing in React (8:10)
Nested Routes & Layouts (using ) (7:17)
URL Parameters & useParams (15:20)
Search Params & Query Strings (9:15)
Programmatic Navigation with useNavigate (7:31)
Protected Routes (Auth Example) (10:00)
Code Splitting & Lazy Loading Routes (4:15)

Forms - Validation & Advanced

Handling Forms in React (Basic) (7:23)
Review of Controlled vs. Uncontrolled Inputs (1:58)
Advanced Form Handling with react-hook-form (11:29)
Schema Validation with Yup (11:33)
Custom Input Components (10:17)

Data Fetching & State Management (React Query / TanStack / Zustand, Redux Toolkit)

React Query (TanStack Query) - Using useQuery for API calls (12:00)
Review of Data Fetching Basics (fetch + useEffect) (11:22)
Query Caching & Refetching (15:32)
Global State with Zustand (12:36)
Redux Toolkit (17:12)
Error Boundary (Synchronous error handling) (11:15)
Error Bounday + Suspense (Asynchronous Error Handling) (9:31)
Modern Error Handling with react-error-boundary (10:31)

React 19 Testing

1.Querying_elements (15:06)
Querying elements (7:58)
Prop-based behaviour (5:58)
Testing conditional rendering (5:57)
Testing Form field initial values (4:43)
Snapshot Testing (12:20)
User Events - Testing Input Typing with userEvent.type (5:01)
User Events - Testing Button Clicks with userEvent.click (5:49)
User Events - Conditional Rendering with userEvent (4:53)
Testing Toggle Interactions (Expand/Collapse) (5:03)
Testing Asynchronous Data Fetching (8:40)
Testing Error States in Asynchronous React Components (11:20)
13.Testing Error States in Asynchronous React Components (7:17)

Teach online with

Controlled vs Uncontrolled Components

Complete and Continue