react hooks

In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

Show Notes

• 00:13 Welcome
• 01:39 Sponsor: Sentry
• 02:41 Auth0
• 03:57 A bit more auth
• 05:24 New RFC
• RFC: First class support for promises and async/await
• 08:30 What are the basics of this proposal?
• 10:12 Scott gets a little Svelte-y
• 11:44 Why is this being proposed?
• 17:14 Infinite loop possibility
• 18:44 Why is Svelte API better in this use case?
• Tanstack
• Smooshgate

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

03:54 - Decouple the UI from the logic

• This wasn’t impossible with class-based components, but we started using HOC to do this.
• With hooks, it makes you decouple what it does and how it looks.
• Makes things like GraphQL code gen possible
• Multiple pieces of state or functionality
• Share commonly used functionality among projects and components

10:31 - Reduction in code

• Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.”

13:30 - useEffect’s dependencies

• These give you access to targeted control over side effects rather than just something changed.

14:15 - Easier to grok

• What happens? When? Where? It’s mostly in the hook.

16:09 - Simplicity in usage

• Thing, updateThing is more targeted than set state
• Ref makes way more sense with useRef
  • String refs weren’t great, the function ref thing was obnoxious

21:07 - Gripes about Hooks

• Naming is kind of odd
  • Vue did a better job with the names

Links

• https://github.com/pmndrs/jotai
• https://github.com/rehooks
• https://twitter.com/youyuxi/status/1327328144525848577/photo/1

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

1:26 - Hooks vs Render Props

• Hooks win hands down
• useState
• useReducer
• useRef
• useContext
• useEffect
• Custom hooks to hide and encapsulate functionality

35:06 - How we use them

• Scott

  • Index that imports all custom hooks
  • Babel alias to hooks folder
  • Import { useHook } from ‘hooks’
  • useContextState

• Wes

  • useResizeObserver
  • useForm
  • useGridRower
  • useWickedFavIcon

45:54 - Which built-in hooks do we not use?

• useImperativeHandle
• useCallback
• useDebugValue

48:22 - Are hooks harder to learn?

• Wes: Yes — but easier to maintain after the fact
• Scott: Yes — harder conceptually and initially but easier after concepts are understood

50:29 - Are classes going away?

• Wes: I say yes
• Scott: Double yes

Links

• Syntax Ep 092: React Hooks
• Making setInterval Declarative with React Hooks - Dan Abramov
• babel-plugin-module-resolver
• awesome-uses
• uses.tech

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Ars Technica War Stories
• Wes: Mpow CH1 Kids Headphones

Shameless Plugs

• Scott: All Courses - Sign up for the year and save 25%!
• Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

6:39 - CSS Subgrid

8:10 - CSS Houdini

11:20 - CSS features not supported in older browsers yet

• Scrollsnap - IE 11 and up. Lot’s of mobile issues.
• position:sticky - no IE at all

14:24 - NPM tink

• installer-less npm
• Load packages at runtime into a shared cache across all projects
• Intelligently download the parts you need

17:25 - Yarn PnP

• Hard links to eliminate package duplication
• Shared cache across all projects

18:31 - Pika & Snowpack

21:10 - Deno

• New Node?

25:39 - React

• Suspense in more libraries
• Suspense for Server Rendering
• Meteor
  • New ownership. v1.9 just dropped with lots of promise for future growth
• Svelte 3
• Vue 3
• Apollo
• Next.js

36:37 - Serverless

• Going to get easier
• Begin.com
• Next.js / Now Functions

38:14 - Gatsby

• A single useQuery (made possible by suspense)

39:36 - Headless CMS Thunderdome

42:20 - Next Gen Frameworks

• Keystone
• Strapi
• Meteor
• Vulcan.js

43:46 - Cypress

• End to end testing
• Currently no Firefox support, but hopeful for 2020

44:21 - Modulz

• Exports to JS component

45:00 - Figma

• Was already amazing in 2019
• Constantly improving and adding new features
• Can import from Sketch

Links

• Syntax 109: CSS Grid Level 2 aka Subgrid
• CSS Houdini
• Interactive Introduction to CSS Houdini
• Tweetdeck
• Next Generation Package Management
• tink
• Pika
• Yarn PnP
• Syntax 212: Pika Pkg
• Snowpack
• Entropic
• Deno
• Ryan Dahl - 10 Things I regret About Node.js
• https://github.com/denoland/deno
• Cloudflare
• Hover
• Meteor
• Meteor roadmap
• tiny
• Svelte 3
• Apollo
• Nextjs
• Vue
• Begin
• Firefox
• Keystone
• Strapi
• Vulcan.js
• Prisma
• Hasura
• Syntax 209: Hasty Treat - Wes Teaches Scott about Keystone.js
• Cypress
• Modulz
• Framer
• Figma
• Sketch
• James Quick YouTube Channel

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Govee Thermometer
• Wes: Rack Mount Power Bar

Shameless Plugs

• Scott: Fullstack React and Firebase - Sign up for the year and save 25%!
• Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

It’s another live episode of Syntax in which Wes and Scott do Hook’d on Hooks, Who’s Snackin’ on React, Stump’d, Unpopular Opinions, Q & Eh, and more!

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

The Armoury - Sponsor

The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.

Show Notes

6:54 - Who’s Snackin’ On React

Guess which of these websites have their homepage partially or fully built in React?

• EltonJohn.com or ArianaGrande.com?
• Ferrari.com or Lamborghini.com?
• Starbucks.com or Dunkindonuts.com?
• WayFair.com or Ikea.com?
• Walgreens.com or Cvs.com?

10:55 - Hook’d on Hooks

• Wes:

  • useSocket
  • useStaticQuery (gatsby)
  • useKeyPress

• Scott

  • useLocalStorage
  • useClickOutside
  • useMeasure
  • useGesture

17:47 - This, That, Both, or Neither?

• Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90’s budget TV show about Cyborgs who read?
• Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland?
• Easy Peasy: A React state library, or children’s spoon set?
• Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children?
• Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear?
• Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV?
• Freeflow: A redux-like state management library built on state, context and hooks, or a California-based hot tub company?
• Ubergrippen: A popular rock climbing spot in Denver, or a client-side video stabilization framework built on the filereader API?

26:22 - Tag Team Coding React

• Fetch Data from the data jokes API
• Show a loading indicator
• Have a button to fetch a new joke

36:24 - Stump’d

• What is a react PureComponent for?
• Why might you use a callback with setState?
• How would you reverse an array without mutating the original array?
• Can you explain what a “downtown job” is?
• When would you use useReducer?
• What makes useLayoutEffect different from useEffect?
• What propType would you use for an object that contains a number and a string

43:11 - Unpopular Opinions. Overrated, Underrated?

• Our own unpopular opinions
  • Scott: React devs like to make things harder than they need to be.
• Dan Abramov
• Ryan Florence
• Sebastian Markbage
• Jared Palmer
• Sean Thomas Larkin
• Sergey Ryzhov
• Sophie Alpert
• Parker McMullin
• Vue does it better _____

52:45 - Q + EH with Wes and Scott

• What where the first apps you worked on?
• What React problem stumped you for the longest time?
• What’s your most expensive mistake?
• Do we need classes in Javascript?
• How do you explain what you do to your mom?
• How do you explain React?
• What made you start wanting to code?
• What’s the hackiest thing you’ve ever done?
• Where do you see yourselves in 10 years?

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Sentry - Sponsor

If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

Show Notes

2:30

• Function components

4:50

• What are React hooks?

8:12

• What problem does this solve?

12:00

• State hooks

21:50

• Context hooks

26:02

• Effect hooks

36:46

• Reducer hooks

40:40

• Ref Hooks

48:00

• Libraries already using React hooks
  • Rehooks → Listing of hook libraries
  • React Spring
  • React Measure
  • Formik
  • Immer

50:30

• Resources
  • Dan Abramov’s Talk
  • Harry Wolf
  • Use Hooks Newsletter
  • Awesome React Hooks

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Bad Blood
• Wes 1: Swindled Podcast
• Wes 2: Scrub Brush Drill

Shameless Plugs

• Scott’s Pro Gatsby 2 Course
• Wes’ Advanced React Course - use the code SYNTAX for $10 off

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets