React HooksでStackな構造を扱うカスタムフック

(2020.08.12更新)
こちらで公開しました。
https://github.com/nariakiiwatani/react-use-stack-ref
https://www.npmjs.com/package/react-use-stack-ref
少し修正加えてるのでもし使われる際はこちらを使ってください。

npm i react-use-stack-ref
または
yarn i react-use-stack-ref
でインストールできます。

---

useStackRef.ts

スタック構造を持ったデータをスッキリ扱いたかったので作った。
作ってみてわかったのは、これはもうほとんどArrayにスタックのインターフェースを被せただけものになったということ。
それでも使う側はだいぶスッキリするから、ないよりはあった方が良くはある。

useStackRef.ts

import { useRef } from "react";

export interface Stack<T> {
	value: T | null
	size: number
	push: (t: T) => number
	pop: () => T
	reset: () => void
	clear: () => void
}

export const useStackRef = <T>(init: T | T[] | (() => T) | (() => T[]) = []): Stack<T> => {
	const initial: T[] = ((value) => Array.isArray(value) ? value : [value])(init instanceof Function ? init() : init)
	const stackRef = useRef<T[]>(initial)

	const push = (t: T): number => stackRef.current.push(t)
	const pop = (): T => stackRef.current.pop() || null
	const reset = (): void => { stackRef.current = initial }
	const clear = (): void => { stackRef.current = [] }

	return {
		value: stackRef.current.slice(-1)[0] || null,
		size: stackRef.current.length,
		push, pop, reset, clear
	};
};

ちなみに、useRefでなくuseStateのスタックを作って紹介している記事はこちら。
React Hooksのカスタムフックが実現する世界 - オブジェクト指向とOSS