React.Basic.Hooks.Aff

useAff :: forall deps a. Eq deps => deps -> Aff a -> Hook (UseAff deps a) (Maybe a)

useAff is used for asynchronous effects or Aff. The asynchronous effect is re-run whenever the deps change. If another Aff runs when the deps change before the previous async resolves, it will cancel the previous in-flight effect.

Note: This hook requires parent components to handle error states! Don't forget to implement a React error boundary or avoid Aff errors entirely by incorporating them into your result type!

useSteppingAff :: forall deps a. Eq deps => deps -> Aff a -> Hook (UseAff deps a) (Maybe a)

A variant of useAff where the asynchronous effect's result is preserved up until the next run of the asynchronous effect completes.

Contrast this with useAff, where the asynchronous effect's result is preserved only up until the next run of the asynchronous effect starts.

newtype UseAff deps a hooks

Constructors

• UseAff (hooks & (UseState (Maybe (Either Error a))) & (UseEffect deps))

Instances

• Newtype (UseAff deps a hooks) _

useAffReducer :: forall state action. state -> AffReducer state action -> Hook (UseAffReducer state action) (state /\ (action -> Effect Unit))

Provide an initial state and a reducer function. This is a more powerful version of useReducer, where a state change can additionally queue asynchronous operations. The results of those operations must be mapped into the reducer's action type. This is essentially the Elm architecture.

Generally, I recommend useAff paired with tools like useResetToken over useAffReducer as there are many ways useAffReducer can result in race conditions. useAff with proper dependency management will handle previous request cancellation and ensure your Aff result is always in sync with the provided deps, for example. To accomplish the same thing with useAffReducer would require tracking Fibers manually in your state somehow.. :c

That said, useAffReducer can still be helpful when converting from the current React.Basic (non-hooks) API or for those used to Elm.

Note: Aff failures are thrown. If you need to capture an error state, be sure to capture it in your action type!

newtype AffReducer state action

mkAffReducer :: forall state action. (state -> action -> { effects :: Array (Aff (Array action)), state :: state }) -> Effect (AffReducer state action)

runAffReducer :: forall state action. AffReducer state action -> state -> action -> { effects :: Array (Aff (Array action)), state :: state }

Run a wrapped Reducer function as a normal function (like runFn2). Useful for testing, simulating actions, or building more complicated hooks on top of useReducer

noEffects :: forall state action. state -> { effects :: Array (Aff (Array action)), state :: state }

newtype UseAffReducer state action hooks

Constructors

• UseAffReducer (hooks & (UseMemo (UnsafeReference (AffReducer state action)) (Reducer { effects :: Array (Aff (Array action)), state :: state } action)) & (UseReducer { effects :: Array (Aff (Array action)), state :: state } action) & (UseEffect (UnsafeReference (Array (Aff (Array action))))))

Instances

• Newtype (UseAffReducer state action hooks) _

useAffActionState :: forall state formData. state -> (state -> formData -> Aff state) -> Hook (UseAffActionState state formData) (state /\ ((formData -> Effect Unit) /\ Boolean))

Aff version of useActionState for managing async form actions. The action function receives the previous state and form data, and returns an Aff that resolves to the new state. React will automatically handle the pending state whilst the Aff is running.

Note: Aff failures are thrown as React errors. If you need to capture an error state, incorporate it into your state type (e.g., Either Error MyState)!

state /\ formAction /\ isPending <- useAffActionState initialState \prevState formData -> do
  result <- submitToServer formData
  pure (processResult prevState result)

pure $ R.button
  { disabled: isPending
  , onClick: handler_ (formAction myFormData)
  }

useAffActionStateWithPermalink :: forall state formData. state -> (state -> formData -> Aff state) -> String -> Hook (UseAffActionState state formData) (state /\ ((formData -> Effect Unit) /\ Boolean))

Like useAffActionState but with a permalink for progressive enhancement. The form will submit to this URL if JavaScript is disabled.

state /\ formAction /\ isPending <- useAffActionStateWithPermalink initialState affFn "/api/submit"

pure $ R.form
  { action: formAction
  , children: [ ... ]
  }

newtype UseAffActionState state formData hooks

Constructors

• UseAffActionState (hooks & (UseActionState state formData))

Instances

• Newtype (UseAffActionState state formData hooks) _