// Trước React 19 với useMemo thủ công
const ExpensiveComponent = ({ data }) => { 
  const computation = useMemo(() => expensiveComputation(data), [data]);
  return <div>{computation}</div>;
};

// Với React 19, React Compiler tự memo hóa
const ExpensiveComponent = ({ data }) => { 
  const computation = expensiveComputation(data);
  return <div>{computation}</div>;
};

import { sql } from '@vercel/postgres';

export default async function UserProfile({ userId }) {
  const { rows } = await sql`SELECT * FROM users WHERE id = ${userId}`;
  return (
    <div>
      <h1>{rows[0].name}</h1>
      <p>Email: {rows[0].email}</p>
    </div>
  );
}

'use server';

async function submitForm(data) {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Form Submitted:', data);
  return { success: true };
}

function MyForm() {
  return (
    <form action={submitForm}>
      <input name="name" placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

import { Suspense } from 'react';

const Image = ({ src }) => <img src={src} alt="Lazy" />;

function LazyImage() {
  return (
    <Suspense fallback={<div>Loading image...</div>}>
      <Image src="path/to/image.jpg" />
    </Suspense>
  );
}

export default function Page() {
  return (
    <>
      <title>My Page Title</title>
      <meta name="description" content="Page description" />
      <div>Content goes here</div>
    </>
  );
}

import { use } from 'react';

function DataFetcher() {
  const data = use(fetchData());
  return <div>Data: {data.name}</div>;
}

async function fetchData() {
  const response = await fetch('api/data');
  return await response.json();
}

function App() {
  return (
    <div>
      <my-custom-element attribute="value"></my-custom-element>
    </div>
  );
}