UpdateWithSideEffects using hooks

Hi, new to Rescript and the hooks side of React. Trying to create a hooks version of UpdateWithSideEffects. Since I want to use useEffect for effects I decided to add effects as part of the state. This works fine but it feels like not the best solution. Any hints or better patterns perhaps?

A simple counter example, quickly prototyped for demonstration. Actions Tick increments and Resetsets to zero. Here I also have ClearEffects to clear any effects once they are done.

type action = 
  | Tick
  | Reset
  | ClearEffects

For now only one effect that logs to screen. Effects are part of the state:

type effect = Log(string)
type state = { count: int, effects: list<effect> }

Straight forward reducer, to add effects, simple add to the effects list.

let reducer = (state:state, action:action) => {
  open Belt
  switch action {
    | Tick => { ...state, count: state.count + 1 }
    | Reset => {
        count: 0,
        effects: List.add(state.effects, Log("Reset counter"))
      }
    | ClearEffects => { ...state, effects: list{} }
  }
}

React component. In useEffect1 simply run the effects and clear them afterwards.

@react.component
let make = () => {
  let (state, dispatch) = React.useReducer(reducer, { count: 0, effects: list{} })

  React.useEffect1( () => {
    open Belt
    if (state.effects != list{}) {
      List.forEach(state.effects, (effect) =>
        switch effect {
          | Log(s) => Js.log(s)
        }
      )
      dispatch(ClearEffects)
    }
    None
  }, [state.effects] )

  <>
    <h2>{React.string("counter.." ++ Belt.Int.toString(state.count))}</h2>
    <button onClick={_ => dispatch(Tick) }>
      {React.string("Tick")}
    </button>
    <button onClick={_ => dispatch(Reset) }>
      {React.string("0")}
    </button>
  </>
}

There is an implementation of that here: https://github.com/bloodyowl/reason-react-update

Perhaps you can use that for ideas, or use it directly as a dependency.

Thanks! Also this can serve as an inspiration: