This episode is all about hooks within React: useState, useEffect, useReducer, useContext, useRef, useMemo, and useCallback.

Sponsors

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit softwareresidency.com/careers

DatoCMS

DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."

For more information, visit datocms.com

Show Notes

0:00 Introduction
4:55 What was before React Hooks
5:14 Class Based Components
5:28 Functional Components
6:19 Experience with Classes
9:14 Benefits of React Hooks
11:31 useState
16:17 Sponsor: DatoCMS
17:11 useEffect
22:37 useReducer
29:22 useContext
32:42 Sponsor: ZEAL
33:34 useRef
35:42 useMemo
- Web Dev Simplified, useMemo in 10 Minutes
- Ben Awad
39:08 useCallback
- Web Dev Simplified, useCallback in 8 Minutes
- Ben Awad
41:15 Sponsor: Vercel
42:08 Grab Bag Questions
42:27 Question #1: useState vs useContext
44:28 Question #2: How can we pause rendering?
46:51 Question #3: useRef vs. useState and in what condition will useState cause an infinite loop?
48:19 Question #4: Do you actually use useCallback and useMemo?
49:44 Question #5: What are some powerful ways you guys have used custom hooks within React?
- Custom Audio Player on YouTube
51:44 Question #5: Forms with mobX, useState, mvvm, and Validation
52:50 Picks and Plugs
53:01 Amy's Pick: Paper Like Screen Protector
53:26 Amy's Plug: SelfTeach.me YouTube Channel
53:37 James's Pick: iPad Keyboard Case
54:52 James's Plug: James Q Quick on YouTube