fix ref attr in konva node, fix issues in strict mode. close #761, #834

Author: lavrton

ReactKonvaCore.d.ts

@@ -1,6 +1,6 @@
 // special file for minimal import
 import * as React from 'react';
-import * as ReactReconciler from 'react-reconciler'
+import * as ReactReconciler from 'react-reconciler';
 import Konva from 'konva';
 
 export interface KonvaNodeEvents {
@@ -102,4 +102,4 @@ export var Arrow: KonvaNodeComponent<Konva.Arrow, Konva.ArrowConfig>;
 export var Shape: KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig>;
 
 export var useStrictMode: (useStrictMode: boolean) => void;
-export var KonvaRenderer: ReactReconciler.Reconciler<any, any, any, any, any>
+export var KonvaRenderer: ReactReconciler.Reconciler<any, any, any, any, any>;

package.json

@@ -1,83 +1 @@
-{
-  "license": "MIT",
-  "name": "react-konva",
-  "description": "React binding to canvas element via Konva framework",
-  "version": "19.0.3",
-  "keywords": [
-    "react",
-    "canvas",
-    "jsx",
-    "konva"
-  ],
-  "bugs": "https://github.com/konvajs/react-konva/issues",
-  "main": "lib/ReactKonva.js",
-  "module": "es/ReactKonva.js",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:konvajs/react-konva.git"
-  },
-  "dependencies": {
-    "@types/react-reconciler": "^0.28.9",
-    "its-fine": "^2.0.0",
-    "scheduler": "0.25.0",
-    "react-reconciler": "0.31.0"
-  },
-  "targets": {
-    "none": {}
-  },
-  "funding": [
-    {
-      "type": "patreon",
-      "url": "https://www.patreon.com/lavrton"
-    },
-    {
-      "type": "opencollective",
-      "url": "https://opencollective.com/konva"
-    },
-    {
-      "type": "github",
-      "url": "https://github.com/sponsors/lavrton"
-    }
-  ],
-  "peerDependencies": {
-    "konva": "^8.0.1 || ^7.2.5 || ^9.0.0",
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@types/chai": "^5.0.1",
-    "@types/mocha": "^10.0.10",
-    "@types/react": "19.0.10",
-    "assert": "^2.1.0",
-    "chai": "5.2.0",
-    "konva": "^9.3.18",
-    "mocha-headless-chrome": "^4.0.0",
-    "parcel": "^2.13.3",
-    "process": "^0.11.10",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sinon": "^19.0.2",
-    "timers-browserify": "^2.0.12",
-    "typescript": "^5.7.3",
-    "use-image": "^1.1.1",
-    "util": "^0.12.5"
-  },
-  "scripts": {
-    "build": "tsc -outDir ./es &&  tsc -module commonjs -outDir ./lib && cp ./ReactKonvaCore.d.ts ./lib && cp ./ReactKonvaCore.d.ts ./es",
-    "test:typings": "tsc --noEmit",
-    "preversion": "npm test",
-    "version": "npm run build",
-    "postversion": "",
-    "test": "NODE_ENV=test npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security && npm run test:typings",
-    "test:build": "rm -rf ./.parcel-cache && NODE_ENV=test parcel build ./test/unit-tests.html --dist-dir test-build --target none --public-url ./ --no-source-maps",
-    "test:watch": "NODE_ENV=test rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html"
-  },
-  "typings": "react-konva.d.ts",
-  "files": [
-    "README.md",
-    "lib",
-    "es",
-    "react-konva.d.ts",
-    "ReactKonvaCore.d.ts"
-  ]
-}
+{}

src/ReactKonvaCore.tsx

@@ -25,7 +25,7 @@ import ReactFiberReconciler, {
 import { ConcurrentRoot } from 'react-reconciler/constants.js';
 import * as HostConfig from './ReactKonvaHostConfig.js';
 import { applyNodeProps, toggleStrictMode } from './makeUpdates.js';
-import { useContextBridge, FiberProvider } from 'its-fine';
+import { useContextBridge, FiberProvider, useFiber } from 'its-fine';
 import { Container } from 'konva/lib/Container.js';
 
 /**
@@ -66,13 +66,23 @@ function usePrevious(value) {
   return ref.current;
 }
 
+const useIsReactStrictMode = () => {
+  const memoCount = React.useRef(0);
+  // in strict mode, memo will be called twice
+  React.useMemo(() => {
+    memoCount.current++;
+  }, []);
+  return memoCount.current > 1;
+};
+
 const StageWrap = (props) => {
   const container = React.useRef(null);
   const stage = React.useRef<any>(null);
   const fiberRef = React.useRef(null);
 
   const oldProps = usePrevious(props);
   const Bridge = useContextBridge();
+  const isMounted = React.useRef(false);
 
   const _setRef = (stage) => {
     const { forwardedRef } = props;
@@ -86,7 +96,20 @@ const StageWrap = (props) => {
     }
   };
 
+  const isStrictMode = useIsReactStrictMode();
+
   React.useLayoutEffect(() => {
+    // is we are in strict mode, we need to ignore the second full render
+    // instead do nothing and just return clean function
+    if (isMounted.current && isStrictMode) {
+      return () => {
+        isMounted.current = false;
+        _setRef(null);
+        KonvaRenderer.updateContainer(null, fiberRef.current, null);
+        stage.current.destroy();
+      };
+    }
+    isMounted.current = true;
     stage.current = new Konva.Stage({
       width: props.width,
       height: props.height,
@@ -117,6 +140,10 @@ const StageWrap = (props) => {
     );
 
     return () => {
+      // inside React strict mode, we need to ignore cleanup, because it will mess with refs
+      if (isStrictMode) {
+        return;
+      }
       _setRef(null);
       KonvaRenderer.updateContainer(null, fiberRef.current, null);
       stage.current.destroy();

src/ReactKonvaHostConfig.ts

@@ -58,6 +58,10 @@ export function createInstance(type, props, internalInstanceHandle) {
   const propsWithOnlyEvents = {};
 
   for (var key in props) {
+    // ignore ref
+    if (key === 'ref') {
+      continue;
+    }
     var isEvent = key.slice(0, 2) === 'on';
     if (isEvent) {
       propsWithOnlyEvents[key] = props[key];

test/react-konva-test.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import sinon from 'sinon';
@@ -15,10 +16,28 @@ import {
   Text,
   Image,
   Circle,
+  Transformer,
 } from '../src/ReactKonva';
 
 global.IS_REACT_ACT_ENVIRONMENT = true;
 
+// Suppress console warnings about act() for custom reconciler updates
+const originalConsoleError = console.error;
+const originalConsoleWarn = console.warn;
+
+console.error = (...args) => {
+  const message = args[0];
+  if (
+    typeof message === 'string' &&
+    (message.includes('was not wrapped in act') ||
+      message.includes('suspended resource finished loading'))
+  ) {
+    // Suppress act warnings for custom reconciler
+    return;
+  }
+  originalConsoleError.apply(console, args);
+};
+
 const render = async (component) => {
   const node = document.createElement('div');
   document.body.appendChild(node);
@@ -89,6 +108,7 @@ describe('initial mounting and refs', () => {
     expect(stageRef.current instanceof Konva.Stage).to.be.true;
     expect(layerRef.current instanceof Konva.Layer).to.be.true;
     expect(rectRef.current instanceof Konva.Rect).to.be.true;
+    expect(rectRef.current.getAttr('ref')).to.be.undefined;
   });
 
   it('no fail on no ref', async () => {
@@ -619,6 +639,9 @@ describe('Test Events', async function () {
 
 describe('Bad structure', () => {
   it('No dom inside Konva', async function () {
+    const originalError = console.error;
+    const error = sinon.spy();
+    console.error = error;
     class App extends React.Component {
       render() {
         return (
@@ -632,6 +655,11 @@ describe('Bad structure', () => {
     }
 
     const { stage } = await render(<App />);
+    expect(error.callCount).to.equal(1);
+    expect(error.firstCall.args[0]).to.include(
+      'Konva has no node with the type div'
+    );
+    console.error = originalError;
     // check check that this test is not failed
   });
 });
@@ -1253,7 +1281,7 @@ describe('Hooks', async function () {
   });
 
   it('check useImage hook', async function () {
-    const url = 'https://konvajs.org/favicon-32x32.png?token' + Math.random();
+    const url = 'https://konvajs.org//img/icon.png?token' + Math.random();
 
     const App = () => {
       const [image, status] = useImage(url);
@@ -1287,7 +1315,7 @@ describe('Hooks', async function () {
   });
 
   it('unsubscribe on unmount', async function () {
-    const url = 'https://konvajs.org/favicon-32x32.png';
+    const url = 'https://konvajs.org//img/icon.png';
 
     const App = () => {
       const [image, status] = useImage(url);
@@ -1336,6 +1364,59 @@ describe('external', () => {
   });
 });
 
+describe('React StrictMode', () => {
+  it('make sure effect is called AFTER we set refs of konva nodes', async function () {
+    const App = () => {
+      const stageRef = React.useRef<Konva.Stage>(null);
+      const [count, setCount] = React.useState(0);
+      const shapeRef = React.useRef<Konva.Rect>(null);
+      const trRef = React.useRef<Konva.Transformer>(null);
+
+      const isMounted = React.useRef(false);
+
+      React.useEffect(() => {
+        setCount(1);
+        setTimeout(() => {
+          setCount(2);
+          setTimeout(() => {
+            setCount(3);
+          }, 10);
+        }, 10);
+      }, []);
+
+      React.useEffect(() => {
+        // we need to attach transformer manually
+        trRef.current?.nodes([shapeRef.current]);
+        trRef.current?.getLayer().batchDraw();
+      }, [count]);
+
+      return (
+        <>
+          {count !== 2 && (
+            <Stage width={300} height={300} ref={stageRef}>
+              <Layer>
+                <Rect fill="red" ref={shapeRef} />
+                <Transformer ref={trRef} />
+              </Layer>
+            </Stage>
+          )}
+        </>
+      );
+    };
+
+    const { stage } = await render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    );
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    const lastStage = Konva.stages[Konva.stages.length - 1];
+    const lastTransformer = lastStage.findOne('Transformer');
+    expect(lastTransformer.nodes().length).to.equal(1);
+    expect(lastTransformer.nodes()[0].fill()).to.equal('red');
+  });
+});
+
 // reference for the test: https://github.com/konvajs/react-konva/issues/748
 // TODO: can we fix that?
 describe.skip('update order', () => {