Home>Courses>A Deep Dive into React Hooks

A Deep Dive into React Hooks

Gain insights into using React Hooks to enhance code composition and reuse. Delve into custom hooks, global state management, unit testing, and the useDependency Pattern for enterprise-level coding.

Intermediate

34 Lessons

Certificate of Completion

Gain insights into using React Hooks to enhance code composition and reuse. Delve into custom hooks, global state management, unit testing, and the useDependency Pattern for enterprise-level coding.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

24 Playgrounds

Course Overview

What You'll Learn

Course Content

Apply Your Skills

Recommendations

Course Overview

In this course, you will learn how to use React Hooks, which will help you achieve better code composition, code reuse, and unit testing ability as opposed to using class components. You’ll start by reviewing what React Hooks are all about and why we need them. This will set the stage for the rest of the course. After that you will dive into the Hooks API, how to manage application state globally, as well as how to create custom hooks. In the second half, you’ll get into unit testing and how to work with ...Show More

In this course, you will learn how to use React Hooks, which will help you achieve better code composition, code reuse, and unit...Show More

What You'll Learn

Complete understanding of React Hooks

Better code composition with React Hooks

Patterns of React Hooks

Complete understanding of React Hooks

Course Content

Introduction

2 Lessons

Get familiar with React Hooks to enhance stateful logic, code composition, and reuse.

Introduction

About the Course

Getting Started with React Hooks

4 Lessons

Walk through React Hooks, enhancing state, side-effect management, and following essential rules.

Introduction to React Hooks

The Need for Hooks in React

First Look at React Hooks Usage

The Story of Rules of Hooks

React Hooks API

6 Lessons

Master the steps to effectively use React hooks for state, side effects, context, and optimization.

useState Hook

useEffect Hook

useContext Hook

React Hook with Reducer Pattern

Memoization Hooks

Less Common Hooks

Advanced: Deep Dive into useEffect Hook

3 Lessons

Build a foundation in optimizing React components with useEffect dependencies and state management.

Using Dependencies Array with useEffect Hook

Run useEffect Function with Change in State or Props

Dependencies Array Usage for Components and Functions

Managing Global State with Hooks

4 Lessons

Take a closer look at managing global state in React using Hooks for modular and efficient code.

Introduction

Designing Global State

Coding for Global State

Practical Example Using Global State

Create Your Own Hooks

6 Lessons

See how it works to create custom hooks for reusable notification logic in React.

Introduction

Building a Notify Hook

Design for Notify Hook

Coding for Notify Hook

Working Example of Notify Hook

Summary

Unit Testing for React Hooks

3 Lessons

Practice using various techniques to effectively unit test React Hooks.

Introduction

Manual Approach to Testing Hooks

React Hooks Testing Library

Advanced: useDependency Pattern with Hooks

5 Lessons

Step through enhancing React components with the useDependency pattern for efficient data handling.

Introduction

Basic Design for useDependency Pattern

Implementation for useDependency Pattern as a Hook

Adding More Options to useDependency Hook

Summary

Conclusion

1 Lessons

Look at the key takeaways of React Hooks and practice with beautiful-react-hooks.

Final Thoughts

Course Author

Sharjeel Ahmad

Project

Build a Memory Game Using React

intermediate

1 hour

Project

Build a Memory Game Using React

Learn to build an interactive memory game with React and Vanilla CSS, focusing on coding, gameplay mechanics, and user engagement.

intermediate

1 hour

Project

Build the Frontend of a Financial Application Using React

intermediate

2 hour

Project

Build the Frontend of a Financial Application Using React

Build the frontend of a financial application using React, integrating it with a Ktor backend with MongoDB to create a finance management web application.

intermediate

2 hours

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Recommended before starting this course

Course

Full Reactive Stack: Spring Boot 2 & Spring WebFlux

Gain insights into building Reactive Web Applications with Spring Boot 2 and Spring WebFlux, from database integration to front-end. Explore Reactive vs MVC, performance, and deployment with Docker.

intermediate

6 hours

Course

Build Reactive Websites with RxJS: Master Observables and Wrangle

Gain insights into building reactive websites with RxJS. Delve into mastering observables and managing events efficiently to create fast, responsive applications while reducing bugs.

intermediate

50 hours 30 mins

Course

Functional Programming with ReasonML

Explore ReasonML's growing popularity and its strong-typed syntax for JavaScript. Learn about creating data objects, functions, and data structures through interactive quizzes and exercises.

beginner

7 hours

Course

Full Reactive Stack: Spring Boot 2 & Spring WebFlux

intermediate

6 hour

Course

Build Reactive Websites with RxJS: Master Observables and Wrangle

intermediate

50 hour 30 min

Course

Functional Programming with ReasonML

beginner

7 hour

Related Courses and Skill Paths

Course

Next.js - The ultimate way to build React apps

Gain insights into building ultra-fast React apps with Next.js. Delve into static optimization, SEO practices, and deploying a giphy search app using the giphy.com API.

intermediate

5 hours

Course

Using TypeScript with React

Gain insights into integrating TypeScript with React to improve productivity. Learn about strongly-typed props, state, and events, and set up projects using Create React App, Webpack, and Babel.

intermediate

9 hours

Course

Reintroducing React: V16 and Beyond

Gain insights into React updates since V16, including new lifecycle methods, context API, and hooks. Discover how to utilize these features for writing better modern React applications.

intermediate

7 hours

Course

Advanced TypeScript Masterclass

Discover advanced TypeScript concepts: Gain insights into compiler flags, generic types, and discriminated unions. Delve into writing error-free code and mastering complex error messages with confidence.

intermediate

6 hours

Course

Next.js - The ultimate way to build React apps

intermediate

5 hour

Course

Using TypeScript with React

intermediate

9 hour

Course

Reintroducing React: V16 and Beyond