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 😛.
I’ve used simplified names for React life cycle method names.
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.
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.
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.
And we had to figure out what to do with it.
But with new React API,
getDerivedStateFromPropstells us what we need to do instead of what React is doing.
We have more direct control over our code resulting in a simpler & readable code.
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 (
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“
componentDidCatchnot yet supported.
useMutationEffectwas also mentioned but later removed.
With hooks, there is no need for an instance variable & use just local variables.
Instead of setting up intervals and saving the 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,
Refer to Mixins documentation.
Hooks solves the “false hierachy” (Ryan calls it a “syntax disaster”) of Render Props.
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).
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 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 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.
Subscribe to Chantastic’s React Holiday where he will cover new APIs mentioned in podcasts.