What are the key features introduced in React 19?

React 19 (released 2024) brings major improvements for full-stack React applications:

#### 1. React Compiler (formerly React Forget)
Automatic memoization - no more manual useMemo, useCallback, or React.memo needed!

     // Before: Manual optimization
     const memoizedValue = useMemo(() => expensiveCalc(a, b), [a, b]);
     
     // React 19: Compiler does it automatically
     const value = expensiveCalc(a, b); // Automatically optimized!
     

#### 2. Server Actions
Call server functions directly from components:

     async function createPost(formData) {
       'use server'
       const post = await db.posts.create({
         title: formData.get('title')
       });
       revalidatePath('/posts');
       return post;
     }

     function NewPost() {
       return (
         <form action={createPost}>
           <input name="title" />
           <button type="submit">Create</button>
         </form>
       );
     }
     

#### 3. Actions & Form Actions
Automatic handling of pending states, errors, and optimistic updates:

     function Form() {
       const [state, formAction] = useFormState(serverAction, initialState);
       const { pending } = useFormStatus();
       
       return (
         <form action={formAction}>
           <input disabled={pending} />
           <button disabled={pending}>
             {pending ? 'Submitting...' : 'Submit'}
           </button>
         </form>
       );
     }
     

#### 4. use() Hook
Read resources (Promises, Context) inside render:

     function User({ userPromise }) {
       const user = use(userPromise); // Suspends until resolved
       return <div>{user.name}</div>;
     }
     

#### 5. useOptimistic Hook
Implement optimistic UI updates:

     function TodoList({ todos }) {
       const [optimisticTodos, addOptimisticTodo] = useOptimistic(
         todos,
         (state, newTodo) => [...state, { ...newTodo, pending: true }]
       );

       async function createTodo(title) {
         addOptimisticTodo({ id: Date.now(), title });
         await saveTodo(title);
       }

       return optimisticTodos.map(todo => (
         <Todo key={todo.id} {...todo} />
       ));
     }
     

#### 6. Document Metadata
Built-in support for <title>, <meta>, etc.:

     function BlogPost({ post }) {
       return (
         <>
           <title>{post.title}</title>
           <meta name="description" content={post.excerpt} />
           <article>{post.content}</article>
         </>
       );
     }
     

#### 7. Asset Loading APIs
Preload resources for better performance:

     import { preload, preinit } from 'react-dom';

     preload('/font.woff2', { as: 'font' });
     preinit('/script.js', { as: 'script' });