Purescript - React Basic Hooks, useAff
Tags: purescript, react, functionalprograming
Published: 2020-02-27 18:33:14

---
title: Purescript - React Basic Hooks, useAff
published: true
description: purescript, react-basic-hooks
tags: purescript, react, functionalprograming
---

According to the [documentation][useAff], `useAff` is defined like this.
```haskell
useAff :: forall key a. Eq key => key -> Aff a -> Hook (UseAff key a) (Result a)
```
`Aff` is used for asynchronous effects. The [docs][aff] on `Aff` is a great place to learn about it!

Back to `useAff`, when I first encountered this function I didn't
really know what it does. Sure, the type signature gave me some clues, like I need to give me it some `key` with the condition that this key has to have an `Eq` instance. The second parameter needs an `Aff`, then it will return some type [`Hook`][hook]. Based on the second parameter this tells me that this is the function I need to make asynchronous effects.

This is my [login component][login-component] using `useAff` but it didn't start out like this. My first implementation for `useAff` was something like this
```haskell
useAff unit $ do
    submitLogin isSubmitting { email: login.email, password: login.password }
```
I was very confused on why it's only getting called once after render. I also
tried something like this.
```haskell
useAff "pleaseWork" $ do
    submitLogin isSubmitting { email: login.email, password: login.password }
```
Of course that didn't work. 

I kept going back to this [example][useAff-example] and this [repo][dogs-repo], and kept wondering what I'm doing different. Then I had my "eureka" moment. I said to myself, "Maybe the `Eq` constraint has something to do with it. Maybe it checks the equality of the `key` parameter I passed in, and if it changes something will happen?" So I changed my implementation to this
```haskell
useAff login $ do
    submitLogin isSubmitting { email: login.email, password: login.password }
```
`login` changes when the button is clicked on this [line][setLogin].
It worked!

# References
[Purescript React Basic Hooks Documentation](https://pursuit.purescript.org/packages/purescript-react-basic-hooks/4.2.1)

[Purescript React Basic Hooks Examples](https://github.com/spicydonuts/purescript-react-basic-hooks/tree/master/examples)

[Purescript React Basic Dogs repo by Peter Murphy](https://github.com/piq9117/purescript-react-basic-dogs)

[Purescript Aff Documentation](https://pursuit.purescript.org/packages/purescript-aff/5.1.2)

[Miles Frain](https://github.com/milesfrain) for answering my questions in fpchat

[useAff]: https://pursuit.purescript.org/packages/purescript-react-basic-hooks/4.2.1/docs/React.Basic.Hooks.Aff#v:useAff
[aff]: https://pursuit.purescript.org/packages/purescript-aff/5.1.2
[hook]: https://pursuit.purescript.org/packages/purescript-react-basic-hooks/4.2.1/docs/React.Basic.Hooks.Internal#t:Hook
[login-component]: https://taezos.org/piq9117/notes-examples/src/branch/master/spago-react-hooks-login/src/Component/LoginAff.purs#L23
[useAff-example]: https://github.com/spicydonuts/purescript-react-basic-hooks/blob/master/examples/aff/src/AffEx.purs#L75
[setLogin]: https://taezos.org/piq9117/notes-examples/src/branch/master/spago-react-hooks-login/src/Component/LoginAff.purs#L46
[dogs-repo]: https://github.com/piq9117/purescript-react-basic-dogs