Merge pull request #21 from effector/fix-memo-updates

Fix memo cases

apps/playground-app/package.json

@@ -20,8 +20,8 @@
     "@types/react": "18.0.33",
     "@types/react-dom": "18.0.11",
     "autoprefixer": "10.4.14",
-    "effector": "^22.8.3",
-    "effector-react": "^22.5.1",
+    "effector": "^22.8.6",
+    "effector-react": "^22.5.4",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "mvp.css": "^1.12.0",

apps/playground-app/src/features/layout/view.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import { AsyncCounter } from "#root/features/async-counter";
+import { MemoUpdatesBugCheck } from "#root/features/memo-check";
 
 const links = [
   {
@@ -28,6 +29,7 @@ export function PageLayout(props: React.PropsWithChildren<{}>) {
             <Link href="/">Breweries playground app</Link>
           </h1>
           <small>Playground app to research Next.js + Effector</small>
+          <MemoUpdatesBugCheck />
         </div>
         <AsyncCounter />
         <nav style={{ marginBottom: 0 }}>

apps/playground-app/src/features/memo-check/index.ts

@@ -0,0 +1 @@
+export { MemoUpdatesBugCheck } from "./view";

apps/playground-app/src/features/memo-check/view.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { $currentPage } from "#root/shared/app";
+import { useUnit } from "effector-react";
+import { memo } from "react";
+
+export function MemoUpdatesBugCheck() {
+  return (
+    <div>
+      <MemoPage prefix="with memo" />
+      <CurrentPage prefix="normal" />
+    </div>
+  );
+}
+
+function CurrentPage({ prefix }: { prefix: string }) {
+  const page = useUnit($currentPage);
+
+  return (
+    <div>
+      Current page: ({prefix}){page}
+    </div>
+  );
+}
+
+const MemoPage = memo(CurrentPage);

apps/playground-app/src/shared/app/index.ts

@@ -7,7 +7,7 @@ export const pageStarted = createEvent<{
   pageCtx: unknown;
 }>();
 
-const $currentPage = createStore<(typeof pageTypes)[number] | null>(null).on(
+export const $currentPage = createStore<(typeof pageTypes)[number] | null>(null).on(
   pageStarted,
   (_, { pageType }) => pageType
 );

package.json

@@ -30,8 +30,8 @@
     "@babel/core": "^7.21.4",
     "@types/react": "^18.0.31",
     "@vitejs/plugin-react": "^3.1.0",
-    "effector": "^22.8.1",
-    "effector-react": "^22.5.1",
+    "effector": "^22.8.6",
+    "effector-react": "^22.5.4",
     "happy-dom": "^9.10.9",
     "react": "^18.2.0",
     "typescript": "^5.0.3",
@@ -40,8 +40,8 @@
     "zx": "^7.2.2"
   },
   "peerDependencies": {
-    "effector": "^22.8.1",
-    "effector-react": "^22.5.1",
+    "effector": "^22.8.6",
+    "effector-react": "^22.5.4",
     "react": "^18.2.0"
   },
   "files": [

src/get-scope.browser.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 
-import { describe, test, expect } from "vitest";
+import { describe, test, expect, vi, afterEach } from "vitest";
 import {
   createStore,
   createEvent,
@@ -10,9 +10,10 @@ import {
   allSettled,
   combine,
   sample,
+  createWatch,
 } from "effector";
 
-import { getScope } from "./get-scope";
+import { getScope, PRIVATE_resetCurrentScope } from "./get-scope";
 
 const up = createEvent();
 const longUpFx = createEffect(async () => {
@@ -38,6 +39,9 @@ const $specialData = createStore(getFixedDate(), {
 }).on($count, () => getFixedDate());
 
 describe("getClientScope", () => {
+  afterEach(() => {
+    PRIVATE_resetCurrentScope();
+  });
   test("should handle server values injection on the fly", async () => {
     const serverScope = fork();
 
@@ -90,6 +94,43 @@ describe("getClientScope", () => {
     expect(clientScopeOne.getState(longUpFx.inFlight)).toEqual(0);
     expect(clientScopeOne.getState($specialData)).toEqual(getFixedDate());
   });
+  /**
+   * Current fix for this test is only implemented inside `effector-react@22.5.4`
+   * 
+   * TODO: After fix is ported into original createWatch of `effector` package in the 23.0.0 release, remove skip
+   */
+  test.skip("watchers should re-run, if value is changed after server values injection", async () => {
+    const watcherCalled = vi.fn(); // Imitates useUnit and stuff
+
+    const scope = getScope({
+      [`${$count.sid}`]: 0,
+    });
+
+    const unwatch = createWatch({
+      unit: $count,
+      scope,
+      fn: watcherCalled,
+    });
+
+    expect(scope.getState($count)).toEqual(0);
+    expect(watcherCalled).toHaveBeenCalledTimes(0);
+
+    const scopeTwo = getScope({
+      [`${$count.sid}`]: 1,
+    });
+
+    expect(scopeTwo.getState($count)).toEqual(1);
+    expect(watcherCalled).toHaveBeenCalledTimes(1);
+
+    const scopeThree = getScope({
+      [`${$count.sid}`]: 1,
+    });
+
+    expect(scopeThree.getState($count)).toEqual(1);
+    expect(watcherCalled).toHaveBeenCalledTimes(1);
+
+    unwatch();
+  });
   test("shallow navigation to same page", async () => {
     const serverScope = fork();