fix: defer useSelector notify during render to avoid "Cannot update a component" react error

[DorianMazur]

Setting an observable inside a useSelector callback during render causes React to error: "Cannot update a component while rendering a different component". This is because notify (which tells React to re-render) fires synchronously while another component is still rendering.

Fix: Defer notify to a microtask. Added a test that checks the warning no longer appears.

Related: #144

[Copilot]

Pull request overview

This PR addresses a React warning triggered when an observable is updated during another component’s render by deferring useSelector’s notification to a microtask, and updates the React test suite accordingly.

Changes:

• Defer useSelector store notifications via queueMicrotask to avoid “Cannot update a component while rendering a different component”.
• Update many React tests to use async act to accommodate deferred notifications.
• Add regression tests ensuring the “Cannot update a component” warning no longer appears in key scenarios.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
src/react/useSelector.ts	Defers notify calls to a microtask to avoid React mid-render update warnings.
tests/testglobals.ts	Makes supressActWarning async and awaits the provided callback.
tests/reactive-observer.test.tsx	Converts tests/act usage to async patterns.
tests/react.test.tsx	Converts many tests to async act, adds new regression tests for the warning, and adjusts tracing tests.

Comments suppressed due to low confidence (1)

tests/react.test.tsx:603

• This test currently defines an async () => { ... } function but never invokes it, so none of the assertions/run logic executes and the test will always pass. Remove the extra arrow function wrapper (and consider giving the test a unique name since it duplicates the previous one).

    test('use$ with array length', async () => {
        async () => {
            const obs$ = observable<{ test: number[] }>({
                test: [0],
            });
            let lastValue: number[] | undefined = undefined;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.