Custom React Hooks Crash Course: Learn Hooks Through 6 Apps

Fast track to applying Custom React Hooks in your React apps using TypeScript

What you'll learn

Build Custom React Hooks from scratch through 6 different apps

Explore different patterns for Custom React Hooks

Learn to use multiple Custom Hooks together

Advanced hooks usage: reducers, testing React Custom Hooks

Requirements

Basic JavaScript/TypeScript experience

Basic understanding of React, such as built-in hooks, JSX, and syntax

Description

In this course, through 6 small applications, we'll recreate hooks and patterns that are commonly used in production web applications.We'll learn how to encapsulate generic utility functions, fetches, business logic, or any code we want to reuse in Custom Hooks.We'll use create-react-app as the starting port for every application, React 18 and TypeScript.The lectures will cover:Introduction to Custom Hooks (Counter app)Structure of a Custom Hook (Toggle component)Lifecycle in Custom Hooks (Weather dashboard)Sharing Logic with Custom Hooks (useForm hook + localStorage)Custom Hooks with Context API (Theme Switcher)Advanced Patterns and Best Practices (Todo app)Testing Custom Hooks (Counter app tests)This course aims to show you different types of Custom React Hooks in various scenarios so you can learn, recognize, and apply these patterns to your application.Working Through This CourseEvery example app is built with Create React App. This was the easiest way for me to create React apps I can work with that don't have any unnecessary clutter, but these patterns can be applied in any React application, no matter how they are created.This course is broken down into lectures and in each lecture you'll build a different app, and in some you'll even reuse some of the hooks you created earlier. The course is a practical, hands-on approach to learning through practice. You learn best when you code along with the examples.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What are Custom React Hooks?

Section 2: Basic Custom Hook Patterns - state, toggle, fetch

Lecture 3 Counter App

Lecture 4 Toggling UI elements

Lecture 5 Weather Dashboard

Section 3: Advanced Custom Hook Patterns - localStorage, Context API, useReducer, testing

Lecture 6 Save form state in localStorage with useForm and useLocalStorage

Lecture 7 Build a Theme Switcher Custom React Hook with the help of Context API

Lecture 8 Build a Custom Hook for managing a list of Todos using useReducer

Lecture 9 Testing Hooks with React Testing Library

React developers who are curious about creating reusable code through Custom React Hooks