Proposal to support event handlers

[pastelmind]

React's basic data flow is, roughly:

User interaction --(A)--> State change --(B)--> View update

Currently, react-rxjs only handles part B. This proposal discusses part A.

---

When using React and RxJS, there are two ways of handling events.

1. Use regular React event handlers, forgoing the benefits of Observables
2. Use fromEvent directly on DOM elements, working outside React's event system

Neither is clearly desirable. Instead, what if react-rxjs provided a helper that creates event handlers using RxJS operators?

Here is a tentative type signature for such a helper:

function useHandler<E = React.Event>(
  factory: (event$: Observable<E>) => Observable<T>,
  dependencyArray: unknown[],
): [(event: E) => void, Observable<T>]

E.g.

import {useHandler} from '@react-rxjs/utils'

const MyComponent = () => {
  const [handler, observable$] = useHandler<React.MouseEvent>(
    // This callback creates an observable
    // When the component mounts, the observable is subscribed automatically.
    // When the component unmounts, the observable is unsubscribed.
    (event$) => event$.pipe(/* ... */),
    [/* dependency array */]
  )

  // Here, we can compose observable$ to create another observable

  return (
    <button onClick={handler}>
      Click me
    </button>
  )
}

(We could flesh out the details of useHandler() later)

This would provide a better story for React devs who want to use RxJS (or vice versa).

[voliva]

React-RxJS is more suited for global state. We already have createSignal that's used to handle user input. Your example would become:

import { createSignal } from '@react-rxjs/utils';

const [observable$, handler] = createSignal();

// Compose observable$ to create other observables

const MyComponent = () => {
  return <button onClick={handler}>
    Click me
  </button>
}

Your proposal is quite close to the approach https://github.com/crimx/observable-hooks are using.

[pastelmind]

Thank you. I did not realize createSignal() could be used in that way.

Edit: It appears that createSignal() is a thin wrapper that constructs a Subject:

react-rxjs/packages/utils/src/createSignal.ts

Lines 34 to 39 in 26b6460

	export function createSignal<A extends unknown[], T>(
	mapper: (...args: A) => T = identity as any,
	): [Observable<T>, (...args: A) => void] {
	const subject = new Subject<T>()
	return [subject.asObservable(), (...args: A) => subject.next(mapper(...args))]
	}

I'd prefer something that provides more logic, though.

Also thanks for pointing me to observable-hooks. It appears that useObservableCallback() is very close to what I want:

https://github.com/crimx/observable-hooks/blob/1520d1c643b6e1770dd7894f338028f0e26cc337/packages/observable-hooks/src/use-observable-callback.ts#L41-L55

...though I was hoping to achieve this w/o importing another library.

[voliva]

Well, your proposal is good and I'd like to thank you for bringing it up.

The main problem with having observables created/defined inside the component is that you need to play well with React's component lifecycle and React's rules. And that the observable is created inside a function that can't be accessed from another component (thus making you refactor your component to "lift the state up").

That's why we went with the approach of having the state declared reactively completely outside from React, then add in bindings for React to interact with that state.

createSignal as you mentioned is a really simple function, but it creates the abstraction of an "entry point" of your observables that can be called through a regular function, and consumed through a regular observable. This essentially solves the point of your original post

When using React and RxJS, there are two ways of handling events.

1. Use regular React event handlers, forgoing the benefits of Observables
2. Use fromEvent directly on DOM elements, working outside React's event system

This way you can use React event handlers easily (because one of the values returned by createSignal is a regular function = event handler) while also getting back a simple Observable, which from the consumer perspective it's not a subject - It can only subscribe to it, without having the ability to push values/errors/complete.

I wonder - What would you like to do with that observable? Why do you need to have it defined within your component?

[pastelmind]

I want to process and transform streams of React event objects and create my own streams from them, which may be exposed via props or useImperativeHandle().

A single global signal is not viable because each instance of a component should have its own stream. For example, this won't cut it:

// Uh, this shouldn't be global
const [clicks$, handleClick] = createSignal<React.MouseEvent>();

function MyComponent() {
  // ...
  return <div onClick={handleClick} />
}

The event observable must be declared and subscribed per each component instance:

function MyComponent() {
  // We'll subscribe to `clicks$` later
  const [clicks$, handleClick] = createSignal<React.MouseEvent>();
  return <div onClick={handleClick} />
}

...which is why I proposed creating a hook.

[monsteradurm]

Apologies if I'm misunderstanding as I've only started using this library a few days ago.

I had the same thought as the OP and ended up going down the path of using keyed signals, using a unique id for each component that needed to store/manage the state of the observable.