rescript-recoil
Zero-cost bindings to Facebook's Recoil library
Installation
Run the following command:
$ yarn add recoil rescript-recoilThen add rescript-recoil to your bsconfig.json's dependencies:
{
"bs-dependencies": [
+ "rescript-recoil"
]
}Usage
Atom
let textState = Recoil.atom({
key: "textState",
default: "",
})Selector
A nice feature the OCaml type-system enables is the ability to differenciate Recoil values between the ones that can only read state with the ones that can write state. This way, you can't use hooks with write capabilities with a read-only value.
With read only capabilities
let textStateSize = Recoil.selector({
key: "textStateSize",
get: ({get}) => {
let textState = get(textState)
Js.String.length(textState)
},
})With write capabilities
let textStateSize = Recoil.selectorWithWrite({
key: "textStateSize",
get: ({get}) => {
let textState = get(textState);
Js.String.length(textState);
},
set: ({set}, newSize) => {
let currentTextState = get(textState);
set(textState, currentTextState->Js.String.slice(~from=0, ~to_=newSize));
}
});Async
let user = Recoil.asyncSelector({
key: "user",
get: ({get}) => {
fetchUser(get(currentUserId))
},
})Hooks
useRecoilState
let (state, setState) = Recoil.useRecoilState(textState);
state // read
setState(textState => newTextState) // writeuseRecoilValue
let state = Recoil.useRecoilValue(textState)
state // readuseSetRecoilState
let setState = Recoil.useSetRecoilState(textState)
setState(textState => newTextState) // writeuseResetRecoilState
let reset = Recoil.useResetRecoilState(textState)
reset() // writeuseRecoilCallback
- Dependency free (reevaluates the callback at every render):
useRecoilCallback(...) - Zero-dependency (never reevaluates the callback):
useRecoilCallback0(...) - One-dependency (reevaluates when dep changes):
useRecoilCallback1(..., [|dep|]) - Multiple-dependencies:
useRecoilCallback2(..., (dep1, dep2))(goes from 2 to 5)
let onClick = Recoil.useRecoilCallback(({snapshot: {getPromise}}, event) => {
let _ = getPromise(myAtom)
|> Js.Promise.then_(value => {
Js.log(value)
Js.Promise.resolve()
})
})
<button onClick={onClick}>
{"Click me"->React.string}
</button>useRecoilValueLoadable
let loadable = Recoil.useRecoilValueLoadable(textState)
Js.log(loadable->Recoil.Loadable.state)
Js.log(loadable->Recoil.Loadable.getValue)Examples
The Recoil Basic Tutorial has been made in ReasonReact: check the source!
You can run it using:
$ yarn examplesand going to http://localhost:8000/TodoList.html
Memoization
type t = {
id: string,
value: string,
isCompleted: bool,
}
// For atoms
let todoItemFamily = Recoil.atomFamily({
key: "todo",
default: param => {
id: param,
value: "",
isCompleted: false,
},
})
// For selectors
let todoItemLengthFamily = Recoil.selectorFamily({
key: "todo",
// The `Fn` wrapper is needed here so that BuckleScript
// outputs the correct value
get: param => Fn(({get}) => {
get(todoItemFamily(param)).value->Js.String2.length
}),
})And use it within a React component:
[@react.component]
let make = (~todoId) => {
let (todo, setTodo) = Recoil.useRecoilState(todoItemFamily(id))
// ...
<>
{todo.value->React.string}
</>
}