React Hooks, First Impressions
Or the art of writing an entire article based on 22 lines of code.
What this Article is Not
This is not a tutorial on React Hooks; for that watch the Dan Abramov’s talk, Making Sense of React Hooks, at React Conf 2018 for that.
This article is not a reference nor a best-practice guide to using Hooks; see the official documentation, Introducing Hooks — React, for that.
It also not a philosophical examination of Hooks; although exploring React Hooks was a bit of a religious experience.
Finally it is not hype about converting to Hooks; although I am a recent convert (this weekend of writing convinced me).
What this Article Is
Having been using React for about four years, I have been continually honing my React skills; to a point where things have become instinctual. So much so that, I was a bit nervous about what was purported to be a paradigm change in React.
When Hooks was first proposed in late 2018, I purposefully tuned out the noise as I was afraid to jump onto the bandwagon too early; I did, however, learn enough to understand the problem that it was trying to solve. The problem being “wrapper hell”.
Now that Hooks is in production, as of a week or two ago, and I had weekend to myself I dove into learning Hooks with some fits and starts. Thought to capture some of the challenges that I faced.
The Before
I thought to explore Hooks by re-implementing my go-to training example; a counter feature. It pretty much does what it looks like it should; the Decrement and Increment buttons update a number on the screen.
My standard approach to this feature includes two component:
Observations:
- The components are written in TypeScript; not terribly relevant to this discussion, but cannot bring myself to not use it
- The Counter component is a container component; the feature’s state / logic Similarly the CounterView component is a presentational component; the features UI. This is a recommended pattern; Presentational and Container Components by Dan Abramov himself
- The example uses the recommended class fields syntax as described in Passing Functions to Components — React; both avoiding having to bind functions in the constructor and re-creating new functions on each render
- It also uses the functional form of setState as it computes the future state based on the current state; described in Component State — React
The After (and Questions)
Following the patterns provided in Dan Abramov’s talk, we can refactor this feature using Hooks as follows:
hello-hooks/src/components/CounterHooks.tsx
Observations:
- The first observation is the implementation is only 22 lines; about half as many lines as the pre-Hooks implementation
- One big plus, the TypeScript implementation is unchanged from the JavaScript one
- We dispensed with the notion of separating the state / logic and UI into separate components: container and presentational. The feature is implemented as a single component. With pre-Hooks React, this would be considered poor practice
- We are required to define functions, e.g., the click handlers, in the render function. With pre-Hooks React, this would also be considered poor practice
- Unlike the first Hooks example provided by React, in this case we use the functional form of the set state function, i.e., setCounter. While important for React’s setState method, is it still relevant for Hook’s set state functions?
- Finally, it is not immediately clear how the set state functions, e.g., setCounter, are linked to the component’s render function; i.e., how can setCounter trigger a call to the CounterHooks function?
The Answers
It was surprising to me that with only 22 lines of code, I would have so many questions.
Container and Presentation Components
With Hooks, implementing state / logic is dramatically simplified:
To solve this, Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
— React — Introducing Hooks
As such the need to distinguish between container and presentational components are greatly diminished.
Defining Functions in Render Function
As a reminder:
Traditionally, performance concerns around inline functions in React have been related to how passing new callbacks on each render breaks shouldComponentUpdate optimizations in child components.
— React — Hooks FAQ
In our CounterHooks component, we do not pass new callbacks because we only have one component (see previous answer).
In the case that we do need to pass callbacks to children, React provides the useCallback hook that supplies a memoized callback. Wow, they thought of everything!
Functional Form of Set State Functions
Turns out this is an easy answer, we do need to use the functional form in this example.
If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.
— React — Hooks API Reference.
Set State Functions Linked to Component’s Render Function
In the case of class-based components, the fact that both render and setState are methods of the component makes it easy to understand that setState can trigger a render.
In the case of Hooks, at first glance, it is not clear how the set state functions can trigger a component’s render.
The key to understanding how this works is to realize that it is React that both calls the component’s render function as well as supplies the set state functions; more specifically:
React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are also only called from React components).
There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.
— React — Hooks FAQ
Conclusion
Assuming that one has a basic grasp of React concepts, one can comfortably switch to using Hooks by watching the Dan Abramov’s talk, Making Sense of React Hooks, and use the Hooks FAQ to fill in the gaps.
At least, that is how I did it.
