Preact Hooks Internal

เดือนที่แล้วนั่งอ่าน Inferno ว่าจะทำ Hook มั้ย

คืออยากหา framework ที่คิดเหมือนเราว่า Hook มันคือ Magic และมัน implement ได้โดยไม่ต้องใช้ Magic นั่นแหละ

ก็ยังไม่รู้ว่า Inferno คิดยังไง แต่ก็มีคนลองๆ ทำอยู่ ซึ่งเค้าก็ไปลอก Preact มาอีกที ไม่รู้ว่าจะเหมือนกับ React มั้ย แต่คิดว่าอ่านแล้วแล้วเข้าใจง่ายดีเลยเอามา blog ไว้หน่อย

useState

ซอร์สของ Preact Hook อยู่ที่ hooks/src/index.js เราจะไล่จากด้านนอกที่เราคุ้นเคยไปก่อนน่าจะง่าย นั่นคือ useState ซึ่งพื้นๆ มาก…

export function useState(initialState) {
	currentHook = 1;
	return useReducer(invokeOrReturn, initialState);
}

ปรากฏว่า useState คือ wrapper บน useReducer ซึ่งก็ทำให้หายสงสัยว่าทำไม React ต้องมี useReducer API ทั้งที่ๆ คนปกติก็จะไปใช้ Redux อยู่แล้ว

ส่วน invokeOrReturn คิดว่าถ้าจำได้ว่า reducer เขียนยังไง แล้ว setState function มันรับอะไรน่าจะพอเดาได้ว่ามัน implement ยังไง

function invokeOrReturn(oldState, f) {
	return typeof f == 'function' ? f(oldState) : f;
}

ง่ายๆ ก็คือมันคืนค่าที่เราเรียกนี่แหละ แต่ถ้า setState เรียกด้วย function มันจะได้ state เก่าเป็น argument แล้วเราคืนค่าใหม่มาแทน

useReducer

export function useReducer(reducer, initialState, init) {
	const hookState = getHookState(currentIndex++, 2);
	hookState._reducer = reducer;
	if (!hookState._component) {
		hookState._component = currentComponent;

		hookState._value = [
			!init ? invokeOrReturn(undefined, initialState) : init(initialState),

			action => {
				const nextValue = hookState._reducer(hookState._value[0], action);
				if (hookState._value[0] !== nextValue) {
					hookState._value = [nextValue, hookState._value[1]];
					hookState._component.setState({});
				}
			}
		];
	}

	return hookState._value;
}

ขอข้าม getHookState ไปก่อนที่จะอธิบายต่อไป

useReducer มี state คือ

  • Reducer function ที่เราส่งเข้าไป
  • Return value ของมันที่ cache ไว้ ก็คือ [state, dispatch] อยู่ใน __value
  • Component instance ซึ่งมันเก็บไว้เรียก setState({}) เพื่อ invalidate view

จะเห็นว่ามันใช้ global state อยู่ 2 อันคือ currentComponent และ currentIndex แล้วใครเซตตัวแปรพวกนี้?

Actual hooks

Preact internal มีส่วนที่เปิดให้ implement functionality เพิ่มเติมได้ซึ่งมันเรียกว่า hook ซึ่งเป็น hook ในความหมายดั้งเดิมคือเราเอา function ไปผูกไว้กับอีกส่วนของ library หรือถ้าใครเขียน Vue มันคือ Hook ในความหมายของ Lifecycle hook นั่นแหละ

Hook ที่เราสนใจคงเป็น _render hook ซึ่งใน docs มันเขียนว่า “Attach a hook that is invoked before a vnode has rendered”

_render hook ของ hook เขียนว่า

options._render = vnode => {
	if (oldBeforeRender) oldBeforeRender(vnode);

	currentComponent = vnode._component;
	currentIndex = 0;

	const hooks = currentComponent.__hooks;
	if (hooks) {
		hooks._pendingEffects.forEach(invokeCleanup);
		hooks._pendingEffects.forEach(invokeEffect);
		hooks._pendingEffects = [];
	}
};

VNode

ถ้าใครเขียน Vue จะเห็นว่า Vue expose VNode API ออกมาให้ด้วย แต่ใน React API ไม่มีให้ใช้เพราะถือเป็น internals

VNode คือ Virtual DOM node นั่นแหละ (Component เราไม่ได้เป็น VNode ตรงๆ แต่จะถูกครอบอีกทีนึง อย่างที่เห็นว่ามันต้อง read vnode._component ออกมาในโค้ดด้านบน)

ฉะนั้นสิ่งที่มันทำก็คือ ทุกครั้งที่เราอยู่บน node ใหม่ มันจะเซฟ currentComponent เก็บไว้ แล้วรีเซต currentIndex เป็น 0

นี่คือ Magic ของ Hook คือแทนที่มันจะเก็บ local state แบบ this.xxx เค้ากลับเลือกที่จะยกออกไปเป็น global ภายในตัว framework

ที่ทำได้เพราะ JavaScript code เป็น single thread (ไม่ต้องกังวลว่ารันโค้ด concurrent แล้วจะมีคนเขียนทับ global) และ Preact rendering ก็เป็น synchronous (ไม่มีแบบว่า render อยู่แล้วสลับไปสลับมา)

ที่น่าสนใจต่อคือ React fiber กำลังจะทำ asynchronous rendering แล้วมัน implement ตรงนี้ยังไงกันนะ?

getHookState

เมื่อกี้เราติด getHookState ไว้

const hookState = getHookState(currentIndex++, 2);

โค้ดของ getHookState คือ

function getHookState(index, type) {
	if (options._hook) {
		options._hook(currentComponent, index, currentHook || type);
	}
	currentHook = 0;

	const hooks =
		currentComponent.__hooks ||
		(currentComponent.__hooks = {
			_list: [],
			_pendingEffects: []
		});

	if (index >= hooks._list.length) {
		hooks._list.push({});
	}
	return hooks._list[index];
}

ส่วนแรกคือ Hook เองเปิดโอกาสให้ใส่ functionality hook เข้าไปได้อีก มันเลยต้องมีตัวแปร currentHook เพื่อบอกให้คนที่เข้ามาต่อรู้ว่ากำลังจะ execute hook ประเภทไหนอยู่ สำหรับค่าต่างๆ มีประกาศไว้ใน type definition

ถัดมามันก็จะอ่าน __hooks บน component ปัจจุบัน หรือสร้างใหม่ ด้านในจะมี array อยู่ซึ่งมันจะอ่านตัวที่ currentIndex ที่ส่งเข้ามา ซึ่งในโค้ด useReducer จะเขียนว่า currentIndex++ ก็คืออ่านค่าปัจจุบันแล้วเลื่อน index ไปลำดับถัดไป

นั่นคืออีก Magic ของ hook ที่ทำให้ function ธรรมดาเรียกสองครั้งแล้วได้ค่าไม่เหมือนเดิม เพราะมันแอบมี global state อยู่นั่นเอง แต่ global state นั้นถูก reset ระหว่าง component ทำให้รู้สึกเหมือนว่ามันเป็น local state

ถ้าถามผมผมก็ยังคิดว่า local state มันควรจะเป็น attribute บน this แล้วใช้ mixin เพื่อ compose behavior ซึ่ง React เคยมีแต่ถอดไปนานแล้ว เพราะมักจะเจอปัญหาตั้งชื่อชนกัน หรือใช้ 2 อันไม่ได้ ใน Hook ก็เลยไม่ให้ตั้งชื่อแล้วทำเป็น index เลื่อนไปเรื่อยๆ แทน

และนี่คือที่มาของกฎของ hook ว่าทำไมห้ามใช้ hook ใน if เพราะลำดับจะเลื่อนไม่ตรงกันแล้ว hook state จะผสมกันมั่ว

ที่น่าสนใจคือ ยังไม่มีตรงไหนบอกว่าทำไม Hook ใช้กับ class component ไม่ได้ ซึ่งถ้าไปอ่าน issue ต้นเรื่อง ทีม Preact บอกว่า

You may be wondering why we mix those and the reason is simply to save some bytes. And yes, this allows hooks to be used in class components! We don’t really advertise that though 👍

บน Preact ใช้ Hook บน class component ได้! (แต่ไม่ใช่ public API)

สรุป

สิ่งที่ Preact Hook ทำคือ

  1. เมื่อกำลังจะ render vdom node ใหม่ ให้เซต currentComponent และเซต currentIndex=0
  2. เมื่อเราเรียก hook มันจะไปอ่าน state บางอย่างบน component ปัจจุบัน
  3. อ่านแล้วมันจะเลื่อน pointer ไปยังช่องถัดไปเพื่อให้ hook ตัวถัดไปได้ state ไม่ตรงกัน

Final thoughts

หลังอ่านจบก็เริ่มสงสัยว่าคนเขียน React สักกี่คนนะที่เชียร์ Hook แล้วเข้าใจจริงๆ ว่า Hook มัน implement อย่างไร (ให้ project เปล่าๆ ห้ามโหลดของจาก npm เขียน Hook ยังไง?)

ก็เกือบไปลองออกเป็นข้อสอบ interview ดู แต่คิดดูอีกทีหนึ่งแล้ว คนที่เขียน Hook ได้คือคนที่แม่น JavaScript (ซึ่งเรา require) แต่นั่นยังไม่ใช่ทั้งหมดที่จะเป็น frontend dev ที่ดีได้ (ยังมีเรื่องอื่นๆ อีกเยอะแยะ เช่น CSS, box layout, sematic markup, web optimization, SEO) มันไม่น่าจะเป็นข้อสอบที่ดีเท่าไร

ในขณะเดียวกัน เอาไปเทส backend dev ก็ไม่ได้เหมือนกันเพราะ React เป็นเรื่องของ Frontend

แล้วใน software team จะให้ role ไหนเป็นคนสร้าง React?

มันเป็นโจทย์ที่ยากมากและ require ความรู้ลึกทั้งฝั่ง backend (โดยเฉพาะ VDOM implementation กับ Suspense) และ frontend เลย หรือนั่นคือนิยามจริงๆ ของ Full stack developer กันนะ