bind hook only firing once with scan and aggregated map about react-rxjs HOT 3 CLOSED

Thanks for your quick answer!
It does make sense and made it clearer to me!
The issue can be closed.
Thank you :)

from react-rxjs.

Oooh, of course right after creating this issue, I had the idea that the mutability of the map might be the problem.

So with this:

  scan((map, b) => {
    return {...map, [String(b)]: b};
  }, {})),

It works!
It kinda makes sense..

I'm not super happy creating a new map on every event though .. is there another way, or am I approaching this completely wrong?

from react-rxjs.

Yes, this is not something that React-RxJS does, but it comes from React itself.

Try this sandbox -> https://stackblitz.com/edit/react-ts-dwqy2x?file=App.tsx,index.tsx

export default function App() {
  const [values, setValues] = useState([]);

  return (
    <div>
      <button
        onClick={() =>
          setValues((v) => {
            v.push(Math.random());
            return v;
          })
        }
      >
        Add
      </button>
      {values.map((v, i) => (
        <div key={i}>{v}</div>
      ))}
    </div>
  );
}

If you click Add, nothing really happens. The values are being added to the array, but React detects it's the same array referentially, so it won't update the component. If you recreate a new array inside setValues, then it will start working.

The observables do create a new emission, so you can still use them to compose other state (as long as you keep it in mind... Operators like distinctUntilChanged, pairwise, etc. won't work as expected). Something I sometimes do is only recreate the map/set/array at the very bottom of the state tree, right before using it in the react components.

from react-rxjs.