Skip to content

Instantly share code, notes, and snippets.

@ducaale
Last active June 7, 2021 19:14
Show Gist options
  • Save ducaale/ad63b4871d3f5c8c12c7e181287d1ad3 to your computer and use it in GitHub Desktop.
Save ducaale/ad63b4871d3f5c8c12c7e181287d1ad3 to your computer and use it in GitHub Desktop.
(WIP) Can we implement react-hooks using FSharps's computation expressions?
// a good reference on how react-hooks work https://youtu.be/KJP1E-Y-xyo
// Also see brisk reconciler https://github.com/briskml/brisk-reconciler
let useTimer() = hook {
let! (now, setNow) = useState(0)
do! useEffect1 (fun () ->
let interval = setInterval 1_000 (fun () -> n+1 |> setNow)
fun () -> interval.clear()
) []
return! now
}
let app() = comp "app" <| hook {
let! elapsedTime = useTimer()
let! (count, setCount) = useState(5)
do! useEffect0 (fun () ->
printfn "component re-rendered"
fun () -> ()
)
return div[] [
p[] [str (sprintf "elapsed time since first render %s" count)]
p[] [str (sprintf "You clicked %s times" count)]
button[onClick (fun -> setCount (count + 1))] [str "click me"]
]
}
(*
* type Tree<'a> =
* | Node of Tree<'a>
* | Leaf of 'a
*
* type Primitive = Input | Button | Div
*
* |
* +------+--------+---------+
* | | | |
* o o +---+---+ o
* | | |
* o o o
*
* To determine what state to return in a given useState call, we will
* start identifying nodes by x (key), y (depth), and component type.
*)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment