perf[react-native]: Memoized Blocks Component to free up UI thread. (#…

…3814)

## Description

`Suspense`:
Added `React.Suspense` to defer the rendering of the `Content` component
until it is fully loaded.

`Memoization`:
`React.memo` to memoize computationally expensive operations within the
`Blocks` component. To prevents unnecessary recalculations of processed
blocks during re-renders, reducing the load on the UI thread.

_Screenshot_
Before:
<img width="798" alt="Screenshot 2025-01-13 at 12 20 38 PM"
src="https://github.com/user-attachments/assets/91ddb89c-2ddd-4930-b62f-7497783ad948"
/>

After:
<img width="798" alt="Screenshot 2025-01-13 at 12 37 41 PM"
src="https://github.com/user-attachments/assets/6dd776b0-3d82-46f1-a98a-7d28e553d44c"
/>

---------

Co-authored-by: Yash Wadhia <[email protected]>

.changeset/early-pillows-jog.md

@@ -0,0 +1,7 @@
+---
+"@builder.io/sdk-react-native": patch
+---
+
+- Enchanced performance: Implemented memoization for the Blocks components
+- Flatlist usage: Configured Flatlist for smoother rendering of block components
+  These changes aims to improve UI responsiveness and reduce rendering overhead

.changeset/nice-llamas-kneel.md

@@ -0,0 +1,2 @@
+---
+---

examples/nextjs-app-dir-v2/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@builder.io/sdk-react": "^1.0.23",
+    "@builder.io/sdk-react": "^3.0.1",
     "next": "14.1.1",
     "react": "^18",
     "react-dom": "^18"

examples/nextjs-app-dir-v2/src/app/components/MyFunComponent.tsx

@@ -0,0 +1,15 @@
+'use client';
+import { useState } from 'react';
+
+export const MyFunComponent = (props: { text: string }) => {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h3>{props.text.toUpperCase()}</h3>
+      <p>{count}</p>
+      <button onClick={() => setCount(prev => prev + 1) }>Click me</button>
+    </div>
+  );
+};
+
+export default MyFunComponent;

examples/nextjs-app-dir-v2/src/app/components/register.ts

@@ -0,0 +1,18 @@
+
+'use client';
+import dynamic from 'next/dynamic';
+import { type RegisteredComponent } from "@builder.io/sdk-react";
+
+export const customComponents: RegisteredComponent[] = [
+  {
+    component: dynamic(() => import('./MyFunComponent')),
+    name: 'MyFunComponent',
+    inputs: [
+      {
+        name: 'text',
+        type: 'string',
+        defaultValue: 'Hello world',
+      },
+    ],
+  },
+];