Understanding Hooks Part 4 — Hook

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.

Constructor

For useEffect, it registers the effect to the effects list. For useState it initialize the array.

Update

The arguments args are worth noting because it's passed in every render cycle.This is especially true for useEffect. The callback, and dependency values are sent as a new copy by default as inputs. There's no returns from useEffect.

TL;DR

A Hook is unique and defines its own behavior while implementing constructor and update. constructor is called once during registration while update is invoked in all element updates with arguments passed in.

Index

The code snippets used are heavily borrowed and simplified from the early draft of Repo Haunted for lit-element.

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