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" })
}

Always on

The effects are always on by default, and are…

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

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

Hook

…

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.