Sung.codes

2018-12-09

React Podcast Episode 31 – “Hooks are Mixins” with Ryan Florence

react, shownote, podcast

banner

_Photo by Jakub Kapusnak on _Unsplash

Ryan Florence appeared on React Podcast episode #31 to talk about hooks and other new features coming in React.

The podcast was recorded before the React Conf 2018 thus there are some time travelling involved 😁.

DISCLAIMER: I am not affiliated with podcast, just an avid listener 😛.

Acronyms

I've used simplified names for React life cycle method names.

  • cDU - comopnentDidUpdate
  • cDM - componentDidMount
  • cWU - componentWillUnmount

📃 Table of Contents

🏹 Intro

Ryan has felt that it's "a little bit unfair" that people complaining about React getting too big.

His explanation was that the new React APIs will enable simpler and smaller code.

🔹 Framework or Library?

Ryan has stated that Ruby has always been a framework as "you hand top level components to ReactDOM.render & React calls all life cycle on it".

He has compared the process to frameworks such as Ruby on Rails & Ember frameworks (at 3:47).

But later in the episode (35:11), Chantastic suggested that React still isn't a framework as React doesn't tell you to use hooks, suspense or resources.

🔹 React take the wheel 🎡

Chantastic mentioned Ryan's blog post React take the wheel, in which Ryan talks about letting React take care of mutations.

In the old (a better term than "legacy" as per Ryan) API of React, React told us what it was doing.

  • cDM (componentDidMount) - I am going to mount
  • cDU (componentDidUpdate) - I updated this

And we had to figure out what to do with it.

But with new React API,

  • We get to define what we need with Suspense & Cache (resource)
  • React tells us what we need to do.
    • getSnapshotBeforeUpdate & getDerivedStateFromPropstells us what we need to do instead of what React is doing.
  • We have a control over life cycle methods (useEffect).

We have more direct control over our code resulting in a simpler & readable code.

⚓ Hooks

🔹 What are hooks?

Borrowing from an analogy in Dan's presentation in React Conf 2018, 
Atom was thought to be the smallest unit of matter but electron was discovered, which has always been around.

Hooks are the functionalities that have always been there in React spread out across over the class but now discovered and given a name.

It's a way to take everything we are doing across class, keeping our state (useState, useReducer, useContext) and manage life cycles (useEffect) within function components enabling high composability.

Ryan has advised not to migrate everything over to use the new API.

Same advice given by Jared Palmer in Ep 29, "Don't Rewrite Your App for Hooks and Suspense with Jared Palmer"

🔹 Types of Hooks

With hooks, there is no need for an instance variable & use just local variables.

e.g.) 
Instead of setting up intervals and saving the ID in this.ID in cDM, and clearing it in cWU using the instance variable, you can create a simple local variable to store the interval ID and clear it in the same hook, useEffect.

🔹 Hooks are (analogies)

  1. "Mixins done right"
  2. "Mixins that don't suck for function components".

Refer to Mixins documentation.

Hooks solves the "false hierachy" (Ryan calls it a "syntax disaster") of Render Props.

♻ 90% Cleaner React

1. Hooks let us co-locate single concern in a few lines of code

e.g.) When you have a document title update code, and event subscription codes spread out across in life cycle methods, you can now separate each unrelated code (updating document title & un/subcribing events) in different piece of code (separate useEffect or your own hooks).

2. Hooks require less code and are more portable

Making it easy to refactor and extract logic to use it in other places.

All states and effects are located next to each other so it's easy to cut & paste (refactor).

React looked simple (with devs only having to deal with components) on the surface but everything you deal with to get the simple task done (fetch/reading data & un/subscribing events), the code became big.

90% Cleaner React talk in React Conf 2018

🌉+💲 Suspense + Resources (Cache)

Suspense & Resources allows you to treat data like a synchronous value.

What's the suitable way to handle hooks, suspense, and resources?

Before we had just components but most apps also use Redux.
So use hooks to replace state and life cycles.
Most of people use Redux as client-side cache, which can be replaced with Suspense and Cache.

Thus, React feels smaller (as previously pointed out at 3:10)

👉Directives?

Directives are "just attributes you put on an element and add a behavior to it".

Hooks lets you add behaviors to elements without having to provide data to a component using Render Props.

I'd need some example on this... kinda confused.
Refer to this Reddit comment regarding the attributes explanation.

🚪 Closing Comments

  • Ryan is incredibly optimistic about React's future as Jared Palmer was in episode #29.
  • Take it (Hooks) fast.
  • Hooks can be shared without transpilation.
    • and "way easier to type because you are not typing a bunch of props" especially true for Render Props.
    • With function components, props are just arguments to a function also making it easy to type

Subscribe to Chantastic's React Holiday where he will cover new APIs mentioned in podcasts.

🏔 Resources