純粋関数型 React Hooks

参考文献: https://www.slideshare.net/SanshiroYoshida/extensible-effects-in-dotty

Transcript

1. 純粋関数型 React Hooks
2. 純粋関数とは 同じ引数を与えると同じ返り値が返る関数 グローバル変数 fetch テストしやすい
3. Hooks import { useState } from 'react' function HogeComponent() { const [count, setCount] = useState(0) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) }
4. は？
5. React16 Func onComponent
6. React17 Func onComponent
7. Stay Pure React コミッターのDan ⽈く https://medium.com/@dan_abramov/making-sense- of-react-hooks-fdbde8803889 Hooks could be implemented in a pure way using algebraic effects (if JavaScript supported them). “ “
8. 今⽇話す内容 React Hooks を純粋関数型で実装した話 https://github.com/tock203/pure-hooks この話で分かる Freer モナド Eff モナド
9. import { useState } from 'react' function HogeComponent() { const [count, setCount] = useState(0) const [name, setName] = useState("Usagi") return ( <div> <p>You clicked {name} {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) }
10. import { useState } from 'react' function HogeComponent() { return state => { /* const [count, setCount] = useState(0) const [name, setName] = useState("Usagi") return ( <div> <p>You clicked {name} {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) */ } }
11. import { useState } from 'react' function HogeComponent() { return 0, state => { const {count, setCount} = state /* const [name, setName] = useState("Usagi") return ( <div> <p>You clicked {name} {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) */ } }
12. import { useState } from 'react' function HogeComponent() { return 0, state => { const {count, setCount} = state return "Usagi", state2 => { const {name, setName} = state2 return ( <div> <p>You clicked {name} {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) } } }
13. 書きにくい
14. Scala のfor 便利 a.flatMap(x => { b.flatMap(y => { c.map(z => z + 10) }) }) for { x <- a y <- b z <- c } yield z + 10
15. Scala のfor 便利 def HogeComponent() = { useState(0).flatMap((count, setCount) => { useState("Usagi").map((name, setName) => { <div> <p>You clicked {name} {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> } } }
16. Scala のfor 便利 def HogeComponent() = for { (count, setCount) <- useState(0) (name, setName) <- useState("Usagi") vdom = <div> <p>You clicked {name} {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> } yield vdom
17. useState 実装してみた enum CUSH[S, R] { // ComputationUsingStateHook State Result case Continue(continueWith: R) case Finish(finishWith: R) case Pause( initialState: S, continuation: ((S, S => Unit)) => CUSH[S, R] ) def flatMap[R2](f: R => CUSH[S, R2]): CUSH[S, R2] = this match { case Continue(continueWith) => f(continueWith) case Finish(finishWith) => f(finishWith) case Pause(initialState, continuation) => Pause( initialState, x => continuation(x).flatMap(f) ) } def map[R2](f: R => R2): CUSH[S, R2] = this.flatMap(x => Finish(f(x))) }
18. useState 実装してみた def HogeComponent() = for { (count, setCount) <- useState(1) vdom = s"<div>${count + 10}</div>" } yield vdom
19. useState 実装してみた def useState[S] (initialState: S) : CUSH[S, (S, S => Unit)] = Pause(initialState, x => Continue(x)) def injectState[S, R] (paused: Pause[S, R], state: S, setState: S => Unit) : CUSH[S, R] = paused.continuation((state, setState)) scala> val a = HogeComponent() val a: CUSH[Int, String] = Pause(1,CUSH$$Lambda$5769/1858659298 scala> injectState(a, 123, x => ()) val res0: CUSH[Int, String] = Finish(<div>133</div>)
20. useContext 実装してみた enum CUCH[C, R] { // ComputationUsingContextHook case Continue(continueWith: R) case Finish(finishWith: R) case Pause(continuation: C => CUCH[S, R]) def flatMap[R2](f: R => CUCH[C, R2]): CUCH[C, R2] = this match { case Continue(continueWith) => f(continueWith) case Finish(finishWith) => f(finishWith) case Pause(continuation) => Pause(x => continuation(x).flatMap(f)) } def map[R2](f: R => R2): CUCH[C, R2] = this.flatMap(x => Finish(f(x))) }
21. Hooks useState useEffect useContext useReducer useCallback useMemo useRef useImpreativeMethods useMutationEffect
22. Don't Repeat Yourself 計算を中断する 中断時に呼び出し元に値を知らせる 再開された時に値を受け取る
23. Freer モナド enum Freer[F[_], R] { case Pure(a: R) case Impure[F[_], R, R0](fa: F[R0], k: R0 => Freer[F, R]) extends Freer[F, R] def flatMap[R2](f: R => Freer[F, R2]): Freer[F, R2] = this match { case Pure(a) => f(a) case Impure(fa, k) => Impure(fa, x => k(x).flatMap(f)) } def map[R2](f: R => R2): Freer[F, R2] = flatMap(x => Pure(f(x))) }
24. ArrayList は型か？ ArrayList<String> array = new ArrayList<String>();
25. useState in Freer case class UseState[S, R]( initialState: S, typeConv: ((S, S => Unit)) => R ) type CUSH[S, R] = Freer[[T] => UseState[S, T], R] def useState[S](initialState: S) : CUSH[S, (S, S => Unit)] = Impure(UseState(initialState, x => x), x => Pure(x)) def injectState[S, R] (freer: CUSH[S, R], state: S, setState: S => Unit) = freer match { case Freer.Pure(a) => throw new Error case Freer.Impure( UseState(initialState, meansNothing), k ) => k(typeConv((state, setState))) }
26. よかったですね
27. 型が合わない def HogeComponent() = for { (count, setCount) <- useState(0) (name, setName) <- useContext(NameContext) vdom = <div> <p>You clicked {name} {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> } yield vdom
28. 型が合わない useState(0).flatMap { x => useContext(NameContext).map { y => def flatMap(fa: F[A], f: A => F[B]): F[B] def map(fa: F[A], f: A => B): F[B]
29. Eff モナド 複数のFreer モナドを合成して⼀つのモナドを作る 型エラーが起きなくなる
30. Eff モナド enum Eff[F[_], R] { case Pure(a: R) case Impure[F[_], R, R0](fa: F[R0], k: R0 => Eff[F, R]) extends Eff[F, R] def flatMap[R2](f: R => Eff[F, R2]): Eff[F, R2] = this match { case Pure(a) => f(a) case Impure(fa, k) => Impure(fa, x => k(x).flatMap(f)) } def map[R2](f: R => R2): Eff[F, R2] = flatMap(x => Pure(f(x))) }
31. Freer モナド enum Freer[F[_], R] { case Pure(a: R) case Impure[F[_], R, R0](fa: F[R0], k: R0 => Freer[F, R]) extends Freer[F, R] def flatMap[R2](f: R => Freer[F, R2]): Freer[F, R2] = this match { case Pure(a) => f(a) case Impure(fa, k) => Impure(fa, x => k(x).flatMap(f)) } def map[R2](f: R => R2): Freer[F, R2] = flatMap(x => Pure(f(x))) }
32. Eff モナド 変なUnion をF に代⼊して使うFreer モナド
33. 型のUnion type Hoge = number | string Array[Int] | Future[Int] | List[Int] | Option[Int] 型コンストラクタのUnion (Array | Future | List | Option)[Int]
34. 型コンストラクタのUnion enum Union[Head[_], Tail[_], R] { case Value(value: Head[R]) case NextType(effects: Tail[R]) } type :+:[Head[_], Tail[_]] = [R] => Union[Head, Tail, R] type F = Array :+: Future :+: List :+: Option :+: Nothing val array: F[Int] = Value(Array(12, 34, 56)) val list: F[Int] = NextType(NextType(Value(List(123, 456))))
35. Union に特定の型コンストラ クタが含まれているか検査し たい 実は難しい 型クラスのインスタンスの再帰的な探索を使う
36. Member 型コンストラクタE が型コンストラクタのUnionU に 含まれている場合、 この型クラスのインスタンスが存在する trait Member[E[_], U[_]] implicit def baseCase[Head[_], Tail[_]] = new Member[Head, Head :+: Tail] implicit def recursiveCase[Needle[_], Head[_], Tail[_]] (implicit m: Member[Needle, Tail]) = new Member[Needle, Head :+: Tail] Array :+: Future :+: List :+: Option :+: Nothing
37. E[A] からE を含むUnion へ型変 換 trait Member[E[_], U[_]] { def lift[R](value: E[R]): U[R] } implicit def baseCase[Head[_], Tail[_]] = new Member[Head, Head :+: Tail] { def lift[R](value: Head[R]): (Head :+: Tail)[R] = Value(value) } implicit def recursiveCase[Needle[_], Head[_], Tail[_]] (implicit m: Member[Needle, Tail]) = new Member[Needle, Head :+: Tail] { def lift[R](value: Needle[R]): (Head :+: Tail)[R] = NextType(m.lift(value)) }
38. E[A] からE を含むUnion へ型変 換 type U = (Array :+: Future :+: List :+: Option :+: Nothing) val l: U[String] = lift(List("abab", "fee")) // -> NextType(NextType(Value(List(abab, fee))))
39. よかったですね
40. useState in Eff case class UseState[S, R]( initialState: S, typeConv: ((S, S => Unit)) => R ) def useState[U[_], S](initialState: S) (implicit m: Member[[R] => UseState[S, R], U]) : Eff[U, (S, S => Unit)] = Impure( m.lift(UseState(initialState, x => x)), x => Pure(x) )
41. useContext in Eff case class UseContext[C, R](typeConv: C => R) def useContext[U[_], C]() (implicit m: Member[[R] => UseContext[C, R], U]) : Eff[U, C] = Impure(m.lift(UseContext(x => x)), x => Pure(x))
42. case class NameContext(name: String) type Effects = ([R] => UseState[Int, R]) :+: ([R] => UseContext[NameContext, R]) :+: Nothing def HogeComponent(): Eff[Effects, String] = for { (state, setState) <- useState(1) context <- useContext() vdom = s"<div>count of ${context.name} is now $state" } yield vdom
43. コンパイルが通った！
44. def runContext[U[_], C, R] (eff: Eff[([R] => UseContext[C, R]) :+: U, R], value: C) : Eff[U, R] = eff match { case Pure(r) => Pure(r) case Impure(Value(UseContext(typeConv)), k) => runContext(k(typeConv(value)), value) case Impure(NextType(u), k) => Impure(u, c => runContext(k(c), value)) }
45. class State[S](var value: Option[S] = None) def runState[U[_], S, R]( eff: Eff[([R] => UseState[S, R]) :+: U, R], state: State[S] ): Eff[U, R] = eff match { case Pure(r) => Pure(r) case Impure( Value(UseState(initialState, typeConv)), k ) => runState( k(typeConv(( state.value.getOrElse(initialState), (newState: S) => state.value = Some(newState) ))), state ) case Impure(NextType(u), k) => Impure(u, s => runState(k(s), state)) }
46. def run[R](eff: Eff[Nothing, R]): R = eff match { case Eff.Pure(a) => a }
47. case class NameContext(name: String) type UseNameContext[R] = UseContext[NameContext, R] type UseIntState[R] = UseState[Int, R] type Effects = UseIntState :+: UseNameContext :+: Nothing def HogeComponent(): Eff[Effects, String] = for { context <- useContext[Effects, NameContext] (state, setState) <- useState(1) vdom = s"<div>count of ${context.name} is now $state</div>" } yield vdom val state: State[Int] = new State // Eff[UseIntState :+: UseNameContext :+: Nothing, String] val a = HogeComponent() // Eff[UseNameContext :+: Nothing, String] val b = runState(a, state) // Eff[Nothing, String] val c = runContext(b, NameContext("birds")) val vdom: String = run(c)
48. よかったですね
49. まとめ 純粋関数型でReact Hooks を実装した 全てを純粋関数にすれば全てをテストできる React Hooks 概念は良いが実装が⿊魔術 なぜ⿊魔術？ → JS の⾔語機能が⾜りないから
50. Freer モナド 中断with 情報 再開with 情報 が可能な計算 再開を別スレッドでやったり、 再開部分を何度も呼び出してループを実現したり、 表現⼒は無限⼤ Eff モナド 複数のFreer を同時に使う⽅法 そのFreer に処理できることはそのFreer にやらせて、 できないことは別のFreer にやらせる