Next-Level React | Working with React Hooks

Explore Working with React Hooks to Modernize State Management in your React Applications

TT4197

Intermediate

5 Days

Course Overview

React Hooks revolutionize how you manage state and effects in your web applications. They enable you to build simple and concise React.js applications, along with helping you avoid using wrapper components in your applications, making it easy to refactor code.

This React course starts by introducing you to React Hooks. You will then get to grips with building a complex UI in React while keeping the code simple and extensible. Next, you will quickly move on to building your first applications with React Hooks. In the next few modules, the course delves into various Hooks, including the State and Effect Hooks. After covering State Hooks and understanding how to use them, you will focus on the capabilities of Effect Hooks for adding advanced functionality to React apps. You will later explore the Suspense and Context APIs and how they can be used with Hooks. Toward the concluding modules, you will learn how to integrate Redux and MobX with React Hooks. Finally, the course will help you develop the skill of migrating your existing React class components, and Redux and MobX web applications to Hooks.

By the end of this course, you will be well-versed in building your own custom Hooks and effectively refactoring your React applications.

Course Objectives

Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore:

  • Understand the fundamentals of React Hooks and how they modernize state management in React apps
  • Build your own custom Hooks and learn how to test them
  • Use community Hooks for implementing responsive design and more
  • Learn the limitations of Hooks and what you should and shouldn’t use them for
  • Get to grips with implementing React context using Hooks
  • Refactor your React-based web application, replacing existing React class components with Hooks
  • Use state management solutions such as Redux and MobX with React Hooks

Need different skills or topics?  If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate.  We offer additional React, web development and design courses which may be blended with this course for a track that best suits your development objectives.

Course Prerequisites

In order to be successful in this class, incoming attendees are required to have current, hands-on experience with React.  This is not a beginner-level course.

Take Before: Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:

  • Mastering React (5 days) or React JumpStart (3 days)

Please see the Related Courses tab for specific Pre-Requisite courses, Related Courses that offer similar skills or topics, and next-step Follow-On Courses and Learning Path recommendations.

Course Agenda

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most.

  1. Introducing React and React Hooks
  • Technical requirements
  • Principles of React
  • Motivation for using React Hooks
  • Getting started with React Hooks
  • Overview of various Hooks
  1. Using the State Hook
  • Technical requirements
  • Reimplementing the useState function
  • Problems with our simple Hook implementation
  • Comparing our reimplementation with real Hooks
  • Solving common problems with Hooks
  • Solving problems with conditional Hooks
  1. Writing Your First Application with React Hooks
  • Technical requirements
  • Implementing static components
  • Implementing stateful components with Hooks

Section 2: Understanding Hooks in Depth

  1. Using the Reducer and Effect Hooks
  • Technical requirements
  • Reducer Hooks versus State Hooks
  • Using Effect Hooks
  1. Implementing React Context
  • Technical requirements
  • Introducing React context
  • Implementing themes
  • Using context for global state
  1. Implementing Requests and React Suspense
  • Technical requirements
  • Preventing unnecessary re-rendering with React.memo
  • Implementing lazy loading with React Suspense
  1. Using Hooks for Routing
  • Technical requirements
  • Creating multiple pages
  • Implementing routing
  • Using routing Hooks
  1. Using Community Hooks
  • Technical requirements
  • Exploring the input handling Hook
  • React life cycles with Hooks
  • Various useful Hooks
  • Responsive design with Hooks
  • Undo/Redo with Hooks
  • Finding other Hooks
  1. Rules of Hooks
  • Technical requirements
  • Calling Hooks
  • Order of Hooks
  • Names of Hooks
  • Enforcing the rules of Hooks
  • Dealing with useEffect dependencies
  1. Building Your Own Hooks
  • Technical requirements
  • Extracting custom Hooks
  • Using our custom Hooks
  • Interactions between Hooks
  • Testing Hooks
  • Exploring the React Hooks API

Section 3: Integration and Migration

  1. Migrating from React Class Components
  • Technical requirements
  • Handling state with class components
  • Migrating from React class components
  • Trade-offs of class components
  1. Redux and Hooks
  • Technical requirements
  • What is Redux?
  • Handling state with Redux
  • Using Redux with Hooks
  • Migrating a Redux application
  • Trade-offs of Redux
  1. MobX and Hooks
  • Technical requirements
  • What is MobX?
  • Handling state with MobX
  • Migrating a MobX application
  • The trade-offs of MobX

Course Materials

Student Materials: Each participant will receive a Student Guide with course notes, code samples, software tutorials, step-by-step written lab instructions, diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work. Any courseware of lab materials provided in a cloud (if applicable) will also be made available to you separately.

Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. We can also help you install this course locally if preferred. Please inquire for details and options.

Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Post-Course Resource Site access with Review Labs & Live Instructor Follow-on Support, access to QuickSkills recorded High-Value lessons, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.

Raise the bar for advancing technology skills

Attend a Class!

Live scheduled classes are listed below or browse our full course catalog anytime

Special Offers

We regulary offer discounts for individuals, groups and corporate teams. Contact us

Custom Team Training

Check out custom training solutions planned around your unique needs and skills.

EveryCourse Extras

Exclusive materials, ongoing support and a free live course refresh with every class.

Summer Savings!
Register today to receive *50% off all 2021 Public Classes*!  Check out our Current Offers for Individuals, Teams and Organizations to Learn for Less!

See our latest Offers and Promotions

Learn. Explore. Advance!

Extend your training investment! Recorded sessions, free re-sits and after course support included with Every Course
Trivera MiniCamps
Gain the skills you need with less time in the classroom with our short course, live-online hands-on events
Trivera QuickSkills: Free Courses and Webinars
Training on us! Keep your skills current with free live events, courses & webinars
Trivera AfterCourse: Coaching and Support
Expert level after-training support to help organizations put new training skills into practice on the job

The voices of our customers speak volumes

Special Offers
Limited Offer for most courses.

SAVE 50%

Learn More