Skip to content

Commit

Permalink
feat: document ref for self-referencing
Browse files Browse the repository at this point in the history
  • Loading branch information
czabaj committed Jan 3, 2025
1 parent 667aaea commit 9c133cb
Showing 1 changed file with 44 additions and 0 deletions.
44 changes: 44 additions & 0 deletions pages/docs/manual/v11.0.0/mutation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,47 @@ Note that the previous binding `five` stays `5`, since it got the underlying ite
## Tip & Tricks

Before reaching for `ref`, know that you can achieve lightweight, local "mutations" through [overriding let bindings](let-binding.md#binding-shadowing).

### Self-Referencing Assignments

There are scenarios where using a mutable `ref` binding becomes necessary, particularly when dealing with self-referencing. This is common when working with functions that return a value and accept a callback that uses that return value. In such cases, you need to initialize a mutable `ref` binding and then assign to it. Here's an example:

<CodeTab labels={["ReScript", "JS Output"]}>

```res example
// hypothetic "showDialog" function shows the given `~content: JSX.element`
// in the dialog. It returns a cleanup function that closes/removes the dialog.
@val external showDialog: (~content: Jsx.element) => unit => unit = "showDialog"
// We want render a "Close" button in the `~content` that will call the
// returned cleanup function when clicked. This requires a mutable binding.
// First initialize it with a dummy function that has the same signature as
// our cleanup function.
let cleanupDialog = ref(() => ())
// assign to the ref and self-refer to the value in the event handler
cleanupDialog :=
showDialog(
~content=<div>
<button onClick={_ => cleanupDialog.contents()}>
{React.string("Close")}
</button>
</div>,
)
```
```js
var cleanupDialog = {
contents: (function () {})
};

cleanupDialog.contents = showDialog(JsxRuntime.jsx("div", {
children: JsxRuntime.jsx("button", {
children: "Close",
onClick: (function (param) {
cleanupDialog.contents();
})
})
}));
```

</CodeTab>

0 comments on commit 9c133cb

Please sign in to comment.