O'Reilly logo
live online training icon Live Online training

Advanced React: Optimizing Hooks

How to use and optimize React Hook

Samer Buna

React.js hooks enable function components to have state and side effects, thereby eliminating the need to use classes or rely on the “this” keyword. React hooks come with their challenges, but using them generally forces you to write better code. We’ll explore how in this training.

What you'll learn-and how you can apply it

By the end of this live, hands-on, online course, you’ll understand:

  • How function components work with React hooks and the role of JS closures
  • How to use the various types of React hooks and how to make them work together
  • How to extract stateful logic into custom React hooks

And you’ll be able to:

  • Use built-in and custom React Hooks for state and side effects
  • Analyze and optimize all types of React Hooks
  • Lint and debug errors related to React Hooks

This training course is for you because...

  • You’re a React developer and want to become an expert on React hooks
  • You work with React classes, and want to simplify your code

Prerequisites

  • Familiarity and comfort with the basics of React and JavaScript

Recommended preparation:

Recommended follow-up:

About your instructor

  • Samer Buna is a polyglot coder with master's degrees in management and information security. He has years of practical experience in designing, implementing, and testing software, including web and mobile applications development, API design, functional programming, optimization, system administration, databases, and scalability. Samer has worked in several industries including real estate, government, education, and publications. Samer has also authored several technical books and online courses about Node.js, React.js, GraphQL, and Ruby on Rails. He is passionate about everything JavaScript, and he loves exploring new libraries.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Using React Hooks (60 minutes)

  • Presentation: Hooks Why/What
  • Demo: The useState Hook
  • Demo: The useEffect Hook
  • Presentation: The rules of hooks and using ESLint to enforce them.
  • Exercise: Convert a stateful class component into a function one
  • Discussion: Is this a better approach? What is the role of closures? How can this be buggy?
  • Demo: The useRef and how it replaces the need for “this”
  • Demo: Using custom hooks
  • Demo: State management with useReducer/useContext hooks
  • Exercise: Implement an action that requires global state access
  • Q&A
  • Break (5 minutes)

Analyzing and Optimizing React hooks (55 minutes)

  • Presentation: Hooks cleanup, diffing, and skipping
  • Demo: Lazy loading and the updater functions
  • Demo: Count the number of generated functions
  • Demo: Memoizing hooks and callbacks
  • Demo: Splitting hooks responsibilities. Data Fetching.
  • Demo: Debugging, previous props/state, useDebugValue
  • Exercise: Identify bug in code example
  • Q&A