What’s behind the legendary React Hooks? From time to time, I wonder.

In Part 2, useEffect and all of its usages were examined in detail. In this Part 3, we’d like to continue and dive in on useState.

function Component() {
const [value, setValue] = useState(initialValue);
...
return (<div />)
}

Initialize the state with an initial value. When needed, notify the Element by calling setState with the new value.

The value provided can be used directly in the Component definition. And it can be further sent into the children components.

function Component() {
const [value, setValue] = useState(initialValue)…


What’s behind the legendary Hooks in React? From time to time, I wonder.

In Part 1, we went through Element implementation to explain the general design concept.

An Element wrapper class manages the initialization, update and teardown of all effects after the registration.

In this second part, we’d like to take a deep dive into the useEffect implementation and see how it supports the callback, teardown, and dependency.

In order to hook into element, the callback needs to be registered.

function Component() {
useEffect(() => { window.title = "ABC" })
}

The effects are always on by default, and are…


What’s behind the legendary Hooks in React? From time to time, I wonder.

Captain Hooks. Find me if you can.

Given a Component, pass it on to a helper function component where it generates a new Element class used by the UI system. Inside this class the additional Hook properties, such as states and effects, are allocated and ready for Hooks.

/* Implementation */
function component(renderer) {
class Element {
constructor() {
this.renderer = renderer
this.states = {}
this.effects = {}
this.queued = false
}
...
}
return Element
}
/* Usage */
const Component = () => <div />
component(Component) // can be transparent to us


Photo by Scott Graham on Unsplash

Imaging for a second you can get any help you want, what type of help do you need for your project?

Project

Of course, we need a project. Though obvious, decent amount of details need to be presented before meaningful architect, or right architect so to speak. You have limited market share to capture, you have limited budget to spend, you have limited resources to work for you. Moreover you get limited expansion power, for instance, your imagination (or time, or business requirement) might dry out sooner than you think.

In short, you need some historical context to sink in before…


Is this level of trouble worth it in the end?

Like any tech-savvy person who would chase the latest computer spec, I’m very much into understanding what’s really going on with a new language, especially when the new language starts to show its potential in practical fields.

Function

The learning isn’t that difficult, at least not the beginning. I’ve been practicing the functional programming, comfortable of functions as a first class citizens, and strongly feeling that function probably is what the programming is about, not the implementation.

>>> length (takeWhile (<1000) (scanl1 (+) (map sqrt [1..]))) + 1

With recursive feature…


What’s behind the legendary Hooks? From time to time, I wonder.

In Part 5, a hook useAsync is crafted to demo how to build a custom hook from useState and useEffect. And in this Part 6, we’d like to continue exploring the Hook family, maybe a more complex one this time, useContext.

const Ancestor = () => {
const value = "Hello"
return (
<Context.Provider value={value}>
<Grandpa>
<Parent>
...
<Component />
</Parent>
...
<Grandpa>
</Context.Provider>
)
}
const Component = () => {
const value = useContext(Context)
...
}

You have an Ancestor, and a value to pass to a…


What’s behind the legendary Hooks? From time to time, I wonder.

Starting Part 4 the generic feature of a Hook is revealed. In this Part 5 we’d like to introduce a custom hook useAync to demonstrate how useState and useEffect can be served as the building blocks.

Say we want to fetch a call fn, wait for the data while loading without blocking the render.

/* Implementation */
const useAsync = (fn) => {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fn().then(res …

What’s behind the legendary Hooks? From time to time, I wonder.

Starting Part 2 and Part 3, useEffect and useState are detailed examined on all usages. In this Part 4 we’d like to reveal the generic feature of a Hook.

Given a Hook and a unique id, for the first time it can be initialized via constructor. For each element update, the hook invokes update with the args.

class Hook {
constructor(id, element) {
this.id = id
this.el = element
}
}
function hook(Hook, ...args) {
let id = notify()
let hook = hooks.get(id)
if(!hook) {…

Thanks for the article.

What about the callback function in `useEffect(callback)`. Is this function cached? Because if it's not, why does `useEffect` not create this function every time as well ?

Why nobody write, `useEffect(useCallback(() => {}))`

Just curious, thanks.


Views of Modern Rome, Ravensburger Jigsaw Puzzle, 5000 Piece.

Me and my wife together finished a 5000 pieces of jigsaw. We attempted this project couple of years ago before we had our son, but failed since none of us had a clue how we could finish it back then.

But this year is different, I guess time is all we have. So we gave it another shot, of course this time we were mentally prepared before we started. That is very important.

Start

Solving puzzle isn’t easy especially when it comes to the magnitude of 5000, because taking 500 pieces as a typical task, dealing with 10 of them at…

Fang Jin

Front-end Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store