Master React Hooks By Example

Learn all React hooks including React 18 and 19 with examples!

What you'll learn

Learn all the built in React Hooks!

Learn by example, each hook has a number of examples that illustrate the hooks usage

Gain valuable knowledge from an experienced React developer

Gain example source code of typical real-life situations using the hooks which you can use in your own projects

Learn hooks from React 18 and even React 19!

Requirements

Students should have some basic knowledge of the fundamentals of React before taking the course

Description

Master React Hooks by Example: Learn all the Hooks in React 17, 18 and 19!Are you ready to take your React skills to the next level? If you’re familiar with React’s basics and want to dive deeper into its core functionality, "Learn React Hooks by Example" is the perfect course for you!In this developer-friendly course, we’ll demystify all of React's built in hooks by exploring them through practical, real-world examples. These hooks are the foundation of modern React development, empowering you to build dynamic, efficient, and maintainable applications.What You’ll LearnuseState: Manage state effectively within functional components.useEffect: Handle side effects like fetching data, updating the DOM, and more.useRef: Work with mutable references and interact directly with DOM elements.useContext: Share data across your app without prop drilling.useReduceruseMemouseCallbackuseImperativeHandleuseLayoutEffectREACT 18 HooksuseIduseTransitionuseDeferredValueuseSyncExternalStoreuseInsertionEffectREACT 19 Hooks (New!)useActionStateuseFormStatusHow You’ll LearnThis course emphasizes learning by doing. Through hands-on examples, you’ll explore typical scenarios you’re likely to encounter in real development projects, such as:Managing form inputs with state.Fetching and displaying data from APIs.Persisting references across renders.Creating and consuming a context for global state management.By the end of the course, you’ll not only understand these hooks conceptually but also feel confident using them to solve real-world challenges in your React applications.Who Is This Course For?This course is ideal for beginners who:Have a basic understanding of React.Want to learn how to work with hooks in functional components.Prefer practical, example-driven learning.Whether you’re looking to solidify your React knowledge or prepare for more advanced topics, "Master Essential Hooks by Example" will equip you with the skills to build powerful, modern React applications.Enroll now and start mastering React’s essential hooks today!

Overview

Section 1: Introduction

Lecture 1 Following this course on CodeSandbox

Section 2: Learning about the useState Hook

Lecture 2 Example 1 - a simple counter

Lecture 3 Example 2 - Theme Toggle

Lecture 4 Example 3 - Simple Form

Lecture 5 Arrays in State - ToDo List

Lecture 6 Objects in State - User Profile Form

Lecture 7 Previous Values from State

Lecture 8 Conditional Rendering

Section 3: useEffect Hook

Lecture 9 Intro to useEffect Hook

Lecture 10 Basic Example of useEffect Hook

Lecture 11 Counter

Lecture 12 Changes from State

Lecture 13 Gotchas with useEffect

Lecture 14 More Gotchas with useEffect

Lecture 15 And More Gotchas with useEffect

Lecture 16 Even More Gotchas with useEffect

Lecture 17 Resizing Windows

Lecture 18 Polling API

Lecture 19 Local Storage

Lecture 20 Parent Properties

Lecture 21 Conditions in useEffect

Lecture 22 User Profile

Lecture 23 Timer Condition

Lecture 24 Pagination

Section 4: useContext Hook

Lecture 25 What is Prop Drilling?

Lecture 26 useContext Hook Intro

Lecture 27 Theming with useContext

Lecture 28 User Auth Profile

Lecture 29 Language Selection

Lecture 30 Language Selection Part 2 - Solution

Lecture 31 Shopping Cart Example

Lecture 32 Nested Contexts Together - Login User Authentication

Section 5: useReducer Hook

Lecture 33 Example 1 - ToDoList with useReducer

Lecture 34 Example 2 - Shopping Cart with useReducer

Lecture 35 Example 3 - Login Form Submission

Lecture 36 Example 4 - Theme Toggle

Lecture 37 Example 5 - Simple Bank Account

Lecture 38 Example 6 - Accordion

Lecture 39 Example 7 - Step Wizard

Section 6: useRef Hook

Lecture 40 Intro to useRef Hook - Example 1 - Manipulate DOM Element

Lecture 41 Example 2 - Timer with useRef Hook

Lecture 42 Example 3 - Tracking Previous State

Lecture 43 Example 4 - Counting number of Renders

Lecture 44 Example 5 - Simple Animation

Lecture 45 Example 6 - Debouncing InputBoxes

Lecture 46 Example 7 - Combining useRef with useEffect

Lecture 47 Example 8 - Scroll Element into View

Lecture 48 Example 9 - useRef with 3rd party library

Section 7: useMemo Hook and React.memo

Lecture 49 Example 1 - Intro to useMemo Hook, memoizing a function

Lecture 50 Example 2 - Filtering a list of items

Lecture 51 Example 3 - Aggregate Function

Lecture 52 Example 4 - Memoizing Style Objects

Lecture 53 Example 5 - Memoizing API Call

Lecture 54 Example 6 - Avoiding Unnecessary Re-Renders

Section 8: useCallback Hook

Lecture 55 Example 1 - Intro to useCallback Hook - Memoizing a function

Lecture 56 Example 2: Stable Event Listener Function

Lecture 57 Example 3: Memoized Function for Computational Logic

Lecture 58 Example 4 - Interaction Between Functions

Lecture 59 Example 5: Preventing Child Component Re-renders

Lecture 60 Example 6: Parent-Child Data Passing with useCallback

Lecture 61 Example 7 - Difference between useMemo and useCallback

Lecture 62 Example 8 - Using useCallback and useMemo together

Section 9: useImperativeHandle

Lecture 63 Example 1 - Toggle Visibility of Child from Parent

Lecture 64 Example 2 - Calling Child Methods from Parent

Lecture 65 Example 3 - Scroll to Element

Section 10: useLayoutEffect

Lecture 66 Example 1 - Avoiding Visual Jumps

Lecture 67 Example 2 - Measuring Divs

Lecture 68 Example 3 - Synchronised Scrolling

Lecture 69 Example 4 - Implementing Tooltips

Lecture 70 Example 5 - Sync Animation State

Section 11: REACT 18 - useID Hook

Lecture 71 Example 1 - useID with Form

Lecture 72 Example 2- useID with Composite Key

Lecture 73 Example 3 - useID uniqueness

Lecture 74 Example 4 - useID for Aria attributes

Section 12: REACT 18 - useTransition Hook

Lecture 75 Example 1 - Loading Progress with useTransition

Lecture 76 Example 2 - Conditional Delayed Rendering

Lecture 77 Example 3 - Conditional Rending with Lists

Section 13: REACT 18 - useDeferredValue Hook

Lecture 78 Example 1 - Debounced Input

Lecture 79 Example 2 - Image Gallery

Lecture 80 Example 3 - Deferring Long Lists

Lecture 81 Example 4 - Expensive Calculations

Lecture 82 Example 5 - Filtering Lists with Expensive Calculations

Section 14: REACT 18 - useSyncExternalStore Hook

Lecture 83 Example 1 - Subscription with external stores

Section 15: REACT 18 - useInsertionEffect Hook

Lecture 84 Example 1 - CSS with JS

Lecture 85 Example 2 - useInsertionEffect for Smooth Animation

Lecture 86 Example 3 - Theme Switcher

Lecture 87 Example 4 - Dynamic Fonts

Lecture 88 Example 5 - Dynamic CSS Transitions

Lecture 89 Example 6 - Critical Styles

Section 16: REACT 19 Hooks

Lecture 90 Example 1 - useActionState - Simple Form

Lecture 91 Example 2 - useFormStatus - Simple Form

Lecture 92 Example 3 - useFormStatus - Validation of Form

Any React developer who would like to get a better understanding of the React hooks and how they are used in real-life coding situations