React Native + Hooks Course

Lesson 1 • JSX and the Virtual DOM

Explains JSX compilation, key prop reconciliation, and how React's diffing algorithm minimises native updates. Connects virtual DOM behaviour to performance.

Lesson 2 • Functional Components Deep Dive

Contrasts class components with functional components and explains why hooks require functional components. Establishes the mental model for stateless UI functions.

Lesson 3 • Modern JavaScript Syntax Review

Covers destructuring, spread/rest, arrow functions, and async/await as used throughout React Native codebases. Reduces syntax confusion in later hook examples.

Lesson 1 • What Is React Native

Explains the bridge architecture, JavaScript thread, and native module system. Positions React Native relative to web React and native development.

Lesson 2 • Creating Your First Project

Uses the React Native CLI to scaffold a project and explains the generated file structure. Connects folder layout to the build pipeline.

Lesson 3 • Core Built-In Components

Introduces View, Text, Image, ScrollView, and TextInput as the primitive UI building blocks. Demonstrates how each maps to a native widget.

Lesson 4 • Setting Up the Development Environment

Installs Node, Watchman, Xcode, and Android Studio with correct SDK versions. Validates the toolchain by running a blank project on both platforms.

Lesson 1 • Managing State with useState

Introduces the useState signature, state initialisation, and updater function patterns. Covers common pitfalls like stale closures and batched updates.

Lesson 2 • Building a Counter and Timer App

Applies useState and useEffect together in a practical counter and countdown timer. Reinforces state updates, intervals, and cleanup in a real component.

Lesson 3 • Side Effects with useEffect

Explains the dependency array, cleanup functions, and execution timing relative to rendering. Replaces all three class lifecycle methods with a single hook.

Lesson 4 • Fetching Remote Data with Hooks

Builds a data-fetching pattern using useState for data/loading/error states and useEffect for the fetch call. Introduces the loading and error UI states.

Lesson 1 • Performance Hooks: useMemo and useCallback

Memoizes expensive computations with useMemo and stabilises function references with useCallback to prevent unnecessary child re-renders.

Lesson 2 • Imperative APIs with useImperativeHandle

Exposes a controlled imperative API from a child component to a parent ref using useImperativeHandle and forwardRef. Useful for custom input components.

Lesson 3 • Referencing Values with useRef

Uses useRef to persist mutable values across renders without triggering re-renders and to access native component instances. Contrasts with useState for non-UI data.

Lesson 4 • Complex State with useReducer

Implements a reducer function and dispatch pattern for multi-action state machines. Compares useReducer to useState for form and cart scenarios.

Lesson 1 • useForm: Form State Management Hook

Builds a useForm hook that manages field values, validation errors, and submission state. Replaces repetitive form logic across multiple screens.

Lesson 2 • Testing Custom Hooks

Uses React Native Testing Library and renderHook to unit-test custom hooks in isolation. Covers act, async act, and mocking external dependencies.

Lesson 3 • useFetch: Data Fetching Hook

Extracts the fetch-loading-error pattern into a reusable useFetch hook with configurable URL and options. Demonstrates how custom hooks reduce component boilerplate.

Lesson 4 • useLocalStorage and useAsyncStorage

Wraps AsyncStorage in a hook that mirrors the useState API for persistent key-value data. Handles serialisation, deserialisation, and error cases.

Lesson 1 • Stack Navigator Patterns

Creates a native stack navigator with push, pop, and replace transitions. Passes params between screens and reads them with useRoute.

Lesson 2 • Tab and Drawer Navigators

Adds bottom tab and drawer navigators and nests them inside the stack. Customises tab icons and drawer content with hook-driven state.

Lesson 3 • Authentication Flow with Navigation

Implements a conditional navigator that switches between auth and app stacks based on token state stored in context. Demonstrates real-world protected routing.

Lesson 4 • Navigation Hooks in Depth

Uses useNavigation, useRoute, useFocusEffect, and useIsFocused to control navigation behaviour from within components. Replaces prop-drilling of navigation objects.

Lesson 1 • Server State with React Query

Uses React Query's useQuery and useMutation hooks to manage server state, caching, and background refetching. Eliminates manual loading/error state management.

Lesson 2 • Redux Toolkit Integration

Configures a Redux store with createSlice, RTK Query for data fetching, and the Provider wrapper. Connects components using useSelector and useDispatch.

Lesson 3 • Context API Patterns at Scale

Splits context into state and dispatch providers to prevent unnecessary re-renders in large trees. Combines useReducer with context for a Redux-like pattern.

Lesson 4 • Global State with Zustand

Creates a Zustand store with actions and selectors, then consumes it with a single hook call. Compares Zustand's minimal API to Context boilerplate.

Lesson 1 • Profiling and Diagnosing Performance

Uses Flipper, the React DevTools profiler, and the Performance Monitor to identify slow renders and JS thread jank. Establishes a measure-first optimisation workflow.

Lesson 2 • Optimising Lists and Images

Applies FlatList optimisation props, image caching, and lazy loading to eliminate scroll jank. Covers windowSize, initialNumToRender, and getItemLayout.

Lesson 3 • Testing Components and Hooks

Writes unit and integration tests with Jest and React Native Testing Library, covering user interactions and async behaviour. Achieves meaningful coverage without testing implementation details.

Lesson 4 • Animation with Animated and Reanimated

Builds smooth animations using the Animated API and upgrades to Reanimated 2 for UI-thread animations. Covers spring, timing, and gesture-driven motion.