chore: resolve conflicts

packages/fiber/src/core/reconciler.tsx

@@ -486,9 +486,8 @@ function swapInstances(): void {
   reconstructed.length = 0
 }
 
-// Don't handle text instances, warn on undefined behavior
-const handleTextInstance = () =>
-  console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.')
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {}
 
 const NO_CONTEXT: HostConfig['hostContext'] = {}
 

packages/fiber/src/core/renderer.tsx

@@ -570,6 +570,17 @@ function Portal({ state = {}, children, container }: PortalProps): React.JSX.Ele
   )
 }
 
+/**
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
+ * having to revert to a non-React solution.
+ */
+export function flushSync<R>(fn: () => R): R {
+  // `flushSync` implementation only takes one argument. I don't know what's up with the type declaration for it.
+  return reconciler.flushSync(fn)
+}
+
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',

packages/fiber/src/web/Canvas.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import * as THREE from 'three'
-import useMeasure from 'react-use-measure'
-import type { Options as ResizeOptions } from 'react-use-measure'
+import { useMeasure, Options as ResizeOptions } from './use-measure'
 import { FiberProvider } from 'its-fine'
 import {
   isRef,