// Trước React Compiler
const ExpensiveComponent = ({ data }) => {
  const computation = useMemo(() => expensiveComputation(data), [data]);
  return <div>{computation}</div>;
};

// Với React Compiler trong React 19
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 response.json();
}

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme === 'dark' ? 'white' : 'black' }}>Hello</div>;
}

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

// pages/index.js
import { sql } from '@vercel/postgres';

export default async function Home() {
  const { rows } = await sql`SELECT * FROM posts LIMIT 5`;
  return (
    <div>
      {rows.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </article>
      ))}
    </div>
  );
}