Exploring the Innovations in React 19 !

Introduction

How to setup /React Canary

//for npm 
npm install react@canary react-dom@canary
//for yarn
yarn add react@canary react-dom@canary

React Compiler

Seo optimization

• Document MetaHead: Simplifies adding titles and meta tags to pages with the <DocumentHead> component, enhancing SEO and brand consistency across the site.

• Asset Loading: React 19 improves asset loading by starting to load pictures and files in the background while users are still on the current page. This reduces waiting time when transitioning to a new page

• Server Components: Slow initial page loads and SEO woes can be addressed with Server Components, a game-changer for React development. By rendering components directly on the server using Server Components, developers can deliver lightning-fast first impressions and boost search engine ranking. This is particularly beneficial for content-heavy applications or those that require high SEO performance.

Directives: use client and use server

Server Component:

import db from 'imaginary-db';
async function Homepage() {
  const link = db.connect('localhost', 'root', 'passw0rd');
  const data = await db.query(link, 'SELECT * FROM products');
  return (
    <>
      <h1>Trending Products</h1>
      {data.map((item) => (
        <article key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </article>
      ))}
    </>
  );
}
export default Homepage;

Client Component:

'use client';
import React from 'react';
function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Current value: {count}
    </button>
  );
}
export default Counter;

Actions

<form action={handleSubmit}>

useFormState

const [state, formAction] = useFormState(fn, initialState, permalink?);

import { useFormState } from 'react-dom';

const addToCart = (prevState, queryData) => {
  const itemID = queryData.get('itemID');
  if (itemID === '1') {
    return 'Added to cart';
  } else {
    return "Couldn't add to cart: the item is sold out.";
  }
};

const AddToCartForm = ({ itemID, itemTitle }) => {
  const [message, formAction] = useFormState(addToCart, null);

  return (
    <form action={formAction} >
      <h2>{itemTitle}</h2>
      <input type='hidden' name='itemID' value={itemID} />
      <button type='submit' >
        Add to Cart
      </button>
      <div>{message}</div>
    </form>
  );
};

export default AddToCartForm;

useFormStatus

const { pending, data, method, action } = useFormStatus();

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

use hook

use(Promise)

import { use, Suspense } from 'react';

const fetchData = async () => {
  const res = await fetch('https://api.chucknorris.io/jokes/random');
  return res.json();
};

const JokeItem = () => {
  const joke = use(fetchData());
  return (
    <div>
      <h2>{joke.value}</h2>
    </div>
  );
};

const Joke = () => {
  return (
    <Suspense
      fallback={
        <h2>Loading...</h2>
      }
    >
	   <ErrorBoundary fallback={
	   <div>Something went wrong</div>}
	   >
	      <title>Chuck Norris Jokes</title>
	      <meta name='description' content='Chuck Norris jokes' />
	      <meta name='keywords' content='chuck norris, jokes' />
	      <JokeItem />
     </ErrorBoundary>
    </Suspense>
  );
};
export { Joke as UseExample1 };

use(Context)

import { use } from 'react';

function ThemeDivider({ show }) {
    if (show) {
        const theme = use(ThemeContext);

        return <hr className={theme} />;
    }

    return null;
}

useOptimistic 

import { useOptimistic } from 'react';
function AppContainer() {
  const [state, setState] = useState(initialState); // Assume there's an initial state
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // Merge and return: new state, optimistic value
      return { …currentState, …optimisticValue };
    }
  );
  // Assume there's an asynchronous operation, like submitting a form
  function handleSubmit(data) {
    // Use optimistic update before the actual data submission
    addOptimistic({ data: 'optimistic data' });
    // Then perform the asynchronous operation
    fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
      })
      .then(response => response.json())
      .then(realData => {
        // Update the state with actual data
        setState(prevState => ({ …prevState, data: realData }));
    });
  }
  return (
    // Render UI using optimisticState
    <div>{optimisticState.data}</div>
  );
}

Conclusion