Day 1: The Fundamentals of React Hooks

React is improving. There are better patterns and practices that are an entirely new approach to developing components and managing state in your React applications.

React’s new hooks feature is amazing! It provides simpler ways to share code and is altogether much simpler than anything we’ve had before. These hooks allow you to manage state, context, refs, and run side-effect code in a way that’s simple and maintainable in the long-term.

In this hands-on workshop, we’ll dive into the built-in hooks you’ll need on a regular basis with simple exercises that allow you to focus on learning the new APIs. When we’re all done, you’ll be equipped with everything you need to know to use hooks in your application (and you’ll be eager to start!).

Topics:

• manage state like a pro with useState.
• Interact with the DOM useRef and useEffect
• make HTTP requests like a boss 😎 with useEffect
• Create custom hooks to organize and reuse component logic

Pre-requisites:

• ReactJS Fundamentals

Day 2: Advanced React Hooks

To learn the more advanced React hooks and different patterns to enable great developer APIs for custom hooks.

React’s basic built-in hooks are phenomenally good and there are several more advanced hooks that provide us with terrific opportunities for optimization. The hooks feature itself also opens up a world of new possibilities to simplify application code through the use of highly optimized and useful custom hooks.

In this workshop, we’ll look at some of the more advanced hooks and ways they can be used to optimize your components and custom hooks. We’ll also look at several patterns you can follow to make custom hooks that provide great APIs for developers to be productive building applications.

Topics

• Use useReducer to manage state and avoid stale state bugs (and learn when it's preferable over useState)
• Optimize expensive operations with useMemo and useCallback
• Interact with third party DOM libraries with useLayoutEffect
• Learn when to use (and when not to use) useImperativeHandle and useDebugValue
• Create custom hooks for complex use cases

Pre-requisites:

• ReactJS Fundamentals
• Knowledge of basic React Hooks use (egghead playlist, egghead course and from Day 1)