purescript-react-basic-hooksはIxMonadでHooksの順序を規定する

これによって、順序の正しさをコンパイラが静的に保証してくれる

元のReact HooksではTypeScriptを使えどHooksの順序は静的に検証はできない

結論

IxMonadなどの型のおかけで

ということがわかる

IxMonadについて軽くおさらい

IxMonadは、通常のMonadの一般化である

通常のMonadと違って、monadic computationで出力の型を変えることができる

通常のMonadの定義はこんな感じ

code:hs

class Monad m where

return :: a -> m a

(>>=) :: m a -> (a -> m b) -> m b

IxMonadの定義はこんな感じ

code:hs

class IxMonad m where

return :: a -> m i i a

(>>=) :: m i j a -> (a -> m j k b) -> m i k b

何が嬉しいのか？の一例が、このReact Hooksの順序規定である

Effect stack

例えば以下のようなcustom hooksを見てみる

code:purs(hs)

useHoge :: ∀ a. Render a (UseState Int (UseEffect Unit a)) Int

useHoge = React.do

useEffectAlways do -- UseEffect

pure mempty

cnt /\ setCnt <- useState 0 -- UseState

pure cnt

このコードを少し観察すると以下のことがわかる

各Hooksは、monadic computationである

他の例も見てみる

code:purs(hs)

usePiyo :: ∀ a. Render a (UseRef Int (UseState Int (UseEffect Unit (UseRef Int a)))) Int

usePiyo = React.do

rendersRef <- useRef 1 -- UseRef

useEffectAlways do -- UseEffect

pure mempty

cnt /\ setCnt <- useState 0 -- UseState

rendersRef <- useRef 1 -- UseRef

pure cnt

見たら分かる通り、呼び出されたhookの順番で上へ上へとstackが積まれていることがわかる

https://gyazo.com/df894f248ef941a8df45b9ab1cab0019

code:purs(hs)

newtype Render :: Type -> Type -> Type -> Type

newtype Render x y a = Render (Effect a)

個々のhooksもRender型で定義するし、

code:purs(hs)

instance IxApplicative Render where

ipure a = Render (pure a)

instance IxBind Render where

ibind (Render m) f = Render (Prelude.bind m \a -> case f a of Render b -> b)

instance IxMonad Render

実装自体は全く同じ

code:purs(hs)

instance TypeEquals x y => Applicative (Render x y) where

pure a = Render (pure a)

instance TypeEquals x y => Bind (Render x y) where

bind (Render m) f = Render (Prelude.bind m \a -> case f a of Render b -> b)

instance TypeEquals x y => Monad (Render x y)

これによって、rendringの前回と今回とで呼び出すhooksの種類と順序が同じであることを静的に検証できる

code:purs(hs)

type Hook (newHook :: Type -> Type) a

= forall hooks. Render hooks (newHook hooks) a

今回のhookを、元のEffect stackの先頭に追加する

つまり、通常のMonadでは、この「積んでいく操作」ができない

なぜなら、monadic computationの実行前後で型が変わっているから

code:purs(hs)

useState ::　forall state.

state

->　Hook (UseState state) (state /\ ((state -> state) -> Effect Unit))

code:purs(hs)

useEffect :: forall deps.

Eq deps

=> deps

-> Effect (Effect Unit)

-> Hook (UseEffect deps) Unit

table:対応

\ Stateモナド IxStateモナド Render(今回の話)

型 State s a State si so a Render x y a

method put, get iput, iget useState, useEffect, etc.

型エラーになる例

Effect stackが異なれば必然的に型エラーを得られる

こういうcustom hookを作って

code:purs(hs)

-- Effect stackは、UseEffect Unit (UseRef Int (UseState Int a))

useHoge = React.do

cnt /\ setCnt <- useState 0

rendersRef <- useRef 1

useEffectAlways do

pure mempty

pure $ cnt /\ setCnt

code:purs(hs)

cnt /\ setCnt <- if odd x

then useState 10

else useHoge -- type error!

「ifの中でhooksを使ってはいけない」というルールを破っている例

理想的な挙動にはならないが型エラーも出ない例

code:purs(hs)

cmt /\ setCnt <- if x > 10

then useState 10

else useState 5

残念ながらこれは型エラーにならない

例えばこれでもエラーになる

custom hooksの型によって、内部で呼び出すhooksの順番と個数が規定されるので型レベルプログラミング的になる

code:purs(hs)

useHoge :: ∀ a. Render a (UseEffect Unit (UseRef Int (UseState Int a))) (Int /\ ((Int -> Int) -> Effect Unit))

useHoge = React.do

cnt /\ setCnt <- useState 0

-- rendersRef <- useRef 1

useEffectAlways do

pure mempty

pure $ cnt /\ setCnt

でも、実際Custom Hook作る時に、

「内部で使うHooksの個数と順序を先に決め」てから定義するとは思えないので、

つまり、IxMonadなどの型のおかけで

ということがわかる

code:purs(hs)

mkCounter = do

component "Counter" \initialValue -> React.do

count /\ setCount <- useState initialValue

setCount (_ + 2) -- type error!!

pure $ R.button { .. }

これも余談だが、IxMonadは、通常のdo記法が機能しない

hsで同じことをする場合は、RebindableSyntax拡張が必要になるがpursでは不要っぽい

code:purs(hs)

import Prelude hiding (bind, discard)

import Prelude (bind) as Prelude

import React.Basic.Hooks.Internal (bind)

code:purs(hs)

bind :: forall a b x y z m. IxBind m => m x y a -> (a -> m y z b) -> m x z b

bind = ibind

discard :: forall a b x y z m. IxBind m => m x y a -> (a -> m y z b) -> m x z b

discard = ibind

codes

code:HookError1.purs(hs)

module Hoge where

import Prelude

import Data.Int (odd)

import Data.Tuple.Nested (type (/\))

import Effect (Effect)

import React.Basic.DOM as R

import React.Basic.Events (handler_)

import React.Basic.Hooks (Component, Render, UseEffect, UseState, component, useEffectAlways, useState, (/\))

import React.Basic.Hooks as React

mkCounter :: Component Int

mkCounter = do

component "Counter" \initialValue -> React.do

x /\ setX <- useState initialValue

cnt /\ setCnt <- if odd x

then useState 10

else useHoge

pure

$ R.button

{ onClick: handler_ do

setX (_ + 1)

, children:

}

useHoge :: ∀ a. Render a (UseState Int (UseEffect Unit a)) (Int /\ ((Int -> Int) -> Effect Unit))

useHoge = React.do

useEffectAlways do

pure mempty

cnt /\ setCnt <- useState 0

pure $ cnt /\ setCnt