Uncaught Error: Missing Subscribe

[SerkanSipahi]

Unfortunately, I don't know what to do because I am very new to the React world and have only worked with Angular until now. Unfortunately, I cannot assign this error. What does "Missing Subscribe" mean? Do I have to subscribe to it myself? If so, what steps are missing here? I have orientated myself on the tests and also on the React page how to build custom hooks.

Sources:
https://github.com/re-rxjs/react-rxjs/blob/main/packages/core/src/bind/connectObservable.test.tsx
https://react-rxjs.org/docs/api/core/bind
https://reactjs.org/docs/hooks-custom.html

Where are my misconceptions of using of react-rxjs?

log://error

Error
Missing Subscribe!
Call Stack
 gv
  vendor.js:1142:15
 mountSyncExternalStore
  vendor.js:23762:20
 Object.useSyncExternalStore
  vendor.js:24701:14
 useSyncExternalStore
  vendor.js:40731:21
 useStateObservable
  vendor.js:1175:101
 useStaticObservable
  vendor.js:1190:37
 App
  main.js:102:30
 renderWithHooks
  vendor.js:23268:18
 mountIndeterminateComponent
  vendor.js:27960:13
 beginWork
  vendor.js:29464:16

file://main.tsx

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

file://app.tsx

export function App() {
  const element = useWatchSelector('video', 0, 250);
  return <div>{radarElement ? 'Found' : 'notFound'}</div>;;
}

file:// use-watch-selector.ts

import { bind } from '@react-rxjs/core';
import { watchSelector } from './radar.observable';
import { useEffect, useState } from 'react';

export function useWatchSelector<Element extends HTMLElement>(
  selector: string,
  startWithInterval = 0,
  interval = 250,
  context: Document | HTMLElement = document,
) {
  const [watchElement, setWatchElement] = useState<Element | null>(null);
  const [useBindValue] = bind(
    watchSelector<Element>(selector, context, interval, startWithInterval), // Obervable<HTMLElement>
  );

  const watchSelectorValue = useBindValue();
  useEffect(() => setWatchElement(watchSelectorValue), [watchSelectorValue]);

  return watchElement;
}

[voliva]

Hey, there are a few issues on your code:

1. bind should never be called in the render function of your components, nor within custom hooks (because they are to be called from render functions). bind is a function that will give you a hook that you can use in your components, but you need to call bind itself outside your component.
2. Because observables are lazy (i.e. they don't own a value until you subscribe to them), the hook returned by bind doesn't know what value to return on the initial render, because React doesn't allow you to trigger side effects in your render functions (so it can't subscribe to the observable). This is why it throws the error Missing Subscribe: It's trying to get the value of an observable that doesn't have any subscription active, so it just can't get a value from it.
3. The value returned by the hook from bind is already a state. You don't need to copy it to another state.
4. Not specific to your code, but it might be relevant when we cover posible solutions: The parameters passed to a bind function should only be identifiers of instances. Meaning passing in objects such as HTMLElements is a bad idea.

The concept behind react-rxjs is that you can build a reactive state that's mostly independent from React. It seems your case is a bit special because I guess watchSelector is trying to find a DOM element by a selector through polling? That's not specifically application state, but a way of getting the DOM object.

Probably the best implementation for that would be to just subscribe to the observable yourself:

export function useWatchSelector<Element extends HTMLElement>(
  selector: string,
  startWithInterval = 0,
  interval = 250,
  context: Document | HTMLElement = document,
) {
  const [watchElement, setWatchElement] = useState<Element | null>(null);

  useEffect(() => {
    const subscription = watchSelector<Element>(selector, context, interval, startWithInterval)
      .subscribe(element => setWatchElement(watchSelectorValue));
    return () => subscription.unsubscribe();
  }, [selector, context, interval, startWithInterval]);

  return watchElement;
}

But if I were to use this with react-rxjs, I would probably have to drop all the parameters, leaving it as:

const [useVideoElement] = bind(   // Element | null
  watchSelector<Element>('video', document, 250, 0),
  null
)

export function App() {
  const element = useVideoElement();
  return <div>{element ? 'Found' : 'notFound'}</div>;;
}

A few things worth of note:

1. I solved the Missing Subscribe problem by giving it a default value null (the second parameter in bind). Another option would be to use the component <Subscribe> (see Subscribe and  Getting started for an example) to manage your subscriptions, then you wouldn't need a default value.
2. To use different parameters (e.g. interval, context, selector, etc.) it would mostly depend on your use case - If it's something the user can control, then I would create some other external RxJS state, and useVideoElement could get those by composing the streams (e.g. with combineLatest). If it's because you have different components and they all use different selectors, then I'd probably just create one hook per each component.

[SerkanSipahi]

@voliva Thank you for your detailed description. I appreciate it very much.

You are absolutely right. Apparently I perceived it wrong in the documentation. I am relatively new to React and a bit overwhelmed because there are a lot of things to consider. Actually I am using "Angular 2+" for 4 years and before that almost 7 years plain JavaScript.

bind should never be called in the render function of your components, nor within custom hooks (because they are to be called from render functions). bind is a function that will give you a hook that you can use in your components, but you need to call bind itself outside your component.

Why does react-rxjs take over this task? Shouldn't it be reported by React? It is quite challenging for a React or react-rxjs user to understand/interpret what "Missing Subscribe" means. I have examined the source code, but I can't figure it out. Thank you for your advice here. Can we submit a MR here to describe this more clearly like "React does not allow you to trigger side effects in your render functions. Please implement this outside of your render function".

Last note. In this official react example (https://reactjs.org/docs/hooks-effect.html) they use effects in a render function. What I misunderstood here?

Because observables are lazy (i.e. they don't own a value until you subscribe to them), the hook returned by bind doesn't know what value to return on the initial render, because React doesn't allow you to trigger side effects in your render functions (so it can't subscribe to the observable). This is why it throws the error Missing Subscribe: It's trying to get the value of an observable that doesn't have any subscription active, so it just can't get a value from it.

Understood, thanks.

The value returned by the hook from bind is already a state. You don't need to copy it to another state.

The element is actually a so-called instance of the HTMLElement. I want to store this instance somewhere so that I can retrieve it when needed. Basically I want to wait with useWatchSelector until the element is there to do something with it. It can also happen that it disappears from the dom again and I want to be notified about that. This interaction can go on all the time. You write that it is a bad idea to put an html instance in the state. How should one be able to solve this in React?

Not specific to your code, but it might be relevant when we cover posible solutions: The parameters passed to a bind function should only be identifiers of instances. Meaning passing in objects such as HTMLElements is a bad idea.

Thank you for this code example. It could solve my job.

Probably the best implementation for that would be to just subscribe to the observable yourself:

In my example I also set the default value to null and this "missing subscribe" is not solved.

I solved the Missing Subscribe problem by giving it a default value null (the second parameter in bind). Another option would be to use the component (see Subscribe and Getting started for an example) to manage your subscriptions, then you wouldn't need a default value.

No user interaction here required. It static in the code.

To use different parameters (e.g. interval, context, selector, etc.) it would mostly depend on your use case - If it's something the user can control, then I would create some other external RxJS state, and useVideoElement could get those by composing the streams (e.g. with combineLatest). If it's because you have different components and they all use different selectors, then I'd probably just create one hook per each component.

[voliva]

Why does react-rxjs take over this task? Shouldn't it be reported by React?

React doesn't have visibility on what we do. We need to return a value we don't have yet (because no one has subscribed to the observable, and we don't have a default value) - We can't subscribe to the observable ourselves because that would break react's rules, all we can do then is throw an exception.

If we break React's rules and subscribe straight away, there's no way React can know we've broken that rule, because it's not involved at all.

It is quite challenging for a React or react-rxjs user to understand/interpret what "Missing Subscribe" means. I have examined the source code, but I can't figure it out. Thank you for your advice here. Can we submit a MR here to describe this more clearly like "React does not allow you to trigger side effects in your render functions. Please implement this outside of your render function".

That's an interesting idea. Throw the exception but add a bit of description on how to solve it. React does this with all its warnings/exceptions (e.g. missing key on a rendered array) and they are useful.

Last note. In this official react example (https://reactjs.org/docs/hooks-effect.html) they use effects in a render function. What I misunderstood here?

The effects happen within the useEffect hook, it's all within React rules. The render function will call each one of the hooks (useState, useEffect - but it won't run the inner function, etc.) then compute the view and return the JSX.

React will call the function passed to the useEffect hook whenever it has to be run. React tells you that you should have all your side effects in a useEffect rather than the render function, because (among other things) it may call your render function many times.

The element is actually a so-called instance of the HTMLElement. I want to store this instance somewhere so that I can retrieve it when needed. Basically I want to wait with useWatchSelector until the element is there to do something with it. It can also happen that it disappears from the dom again and I want to be notified about that. This interaction can go on all the time. You write that it is a bad idea to put an html instance in the state. How should one be able to solve this in React?

I'm not sure I understand your question - It is alright to have HTMLElement in the state, but I did mention 2 things:

1. bind is already internally using useState to store the resulting HTMLElement in a state for your component, no need to copy it to another one.
2. Only use identifying parameters to the factory overload of bind.

With the factory overload what I mean is that bind has an overload that lets you pass in parameters:

const [useProfileData] = bind((profileId: string) => ...)

And this is a bit of a double-edge sword. It might be tempting to use this feature to pass in all sorts of options to your observable, but that's usually a bad idea. Every time you pass in a new reference to that hook, it will re-run the factory function to create a new observable with those parameters and subscribe to it. So this becomes problematic:

// Don't do this
const [useProfiles] = bind((filterOptions: { name?: string, timestamp?: number, ... }) => ...);

function FilteredProfileList() {
  const profiles = useProfiles({ name: 'foo', timestamp: 100000 });

  ...
}

This component will get into an infinite render loop, because we're passing in a new reference for the filterOptions parameter, which will resubscribe to a new instance, which will render again (and repeat ad infinitum).

You could argue that you can memoize the parameter to solve this issue, and it would - But then you'd still have lingering observables/subscriptions that's really hard to manage properly.

A pattern that's easier to reason about is if the parameters are only instance identifiers. Instance identifiers are finite, because you only have as many as how much instances you have, so you can "easily" build a subscription chain that manages all of them.

The solution to the filter problem is to move the filter options value into another observable:

const filterOptions$ = state(....);
const [useProfiles] = bind(filterOptions$.pipe(
  switchMap(options => ...)
);

function FilteredProfileList() {
  const profiles = useProfiles();

  ...
}

Or (if it's "hard-coded" per component) create a new hook for each component.

It is a gray area though... if you consider your objects to be instance identifiers I guess it makes sense to have them. Passing in an HTMLElement I think it's not a good idea, because (as you said) the element can be destroyed and a new one created. If hard-coding it is not an option, maybe I would try pushing in through the "Move it to another observable" solution? I mean with createSignal you can create an entry point for your element that then you can consume in the observable.

In my example I also set the default value to null and this "missing subscribe" is not solved.

I think in your example you're setting the default value to null of the useState hook. The default value on bind is the second parameter (bind(observable, defaultValue))

[SerkanSipahi]

@voliva Sorry for my late reply. I was a bit mentally exhausted the entire last week (daily business, family, etc) :)

I am currently a bit overwhelmed by react and in connection with react-rxjs. I have to gather my thoughts and study what you wrote more intensively. I am very familiar with RxJs and so I thought it would be an advantage to use this with react-rxjs in react. Do you think that a React beginner should do not mix in the beginning rxjs (react-rxjs) with react in order to get the mental of react?

FYI: I will submit a MR to the documentation in order to improve it because it confused me a lot. I have created the bind function as you described out of the render function but immediately got again this error: "missing subscribe" and after the default value was passed the error disappeared. This was not obvious from the documentation and take me time to solve that.

If you don't give it a default value, you will need to make sure that observable has a subscription active before the Component that uses that hook is called.

I think it is important that misusing of react-rx should be also pointed out in the docs in form of which error can appear. As I said before in our previously talks it is good to provide meaningful error message or with a link the documentation from the log in the dev-tools.