在传递给 RxJS 订阅的回调中使用时，来自 useState 钩子的 React setState 会导致异常

Question

I'm writing some helpers to ease usage of RxJS within React.

I wrote a custom hook which allows you to send callbacks to subscribe and get updates from an RxJS stream and update it. This hook also lets you register callbacks for stream error and completion . These worked properly in tests, but when writing a proper example, React throws an error on stream error, error which should be handled and the message displayed in the UI.

This is a working sandbox with the same code as below, with buttons for updating, sending an error and completing the stream

demo component follows. Note the line where the error happens:

export default ({subject})=>{
    const [hasError, setHasError] = useState(false);
    const [complete, setComplete] = useState(false);
    const onError = (err)=>{
        setHasError(true); // <-------------- Commenting this line avoids the error!
        console.log('Value handled error',err);
    };
    const onComplete = ()=>{
        setComplete(true);
        console.log('Value handled completion');
    };
    const [val,setVal] = useSubject(subject,onError,onComplete);
    const onClick = ()=>setVal(val+1);
    return (
        <span>
            {val}
            {hasError?' An Error ocurred ':null}
            {complete?' Stream has completed ':null}
            <button onClick={onClick}>increment</button>
            <button onClick={()=>subject.error(5)}>Generate error</button>
            <button onClick={()=>subject.complete()}>Complete</button>
        </span>
    );
}

Custom hook follows:

export const useSubject = (subject,onError,onComplete) => {
  const [value, setValue] = useState(subject.getValue());
  useEffect(() => {
    const subFn = { next: data => setValue(data) };
    if (onError) { subFn.error = err => onError(err); }
    if (onComplete) { subFn.complete = () => onComplete(); }
    const sub = subject.pipe(skip(1)).subscribe(subFn);  
    return () => sub.unsubscribe();
  });
  const newSetState = state => subject.next(state);
  return [value, newSetState];
};

The error message from React is not very useful, and if I understand correctly, error boundaries would only help me display a better UI, but I'm interested in fixing the error, not containing it.

With the line that updates the state commented out, the callback works and logs to console with no issue, while if I update the state in the callback (so I can drive an UI update), it crashes. I tried many workarounds and shifting responsabilities between hook and component, but in the end I do need the state updated in the component, which is causing the crash. Strangely enough, completing the stream also updates the state, via a very similar callback, but that one works.

What am I doing wrong? Can it be helped or worked around?

Answer 1

In RxJS any error or complete-call will basically "kill" a stream. After you setHasError(true) in your "Sample" component, it re-renders and runs this line again:

const [val, setVal] = useSubject(subject, onError, onComplete);

that hook begins with:

const [value, setValue] = useState(subject.getValue());

Where getValue() on an errored subject throws an error.