npm i react@canary react-dom@canary

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

function Submit() {
  const {pending} = useFormStatus(); // will return {pending, data, method, action}
  return <button disabled={pending}>Submit</button>
}

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

import { useFormState } from "react-dom";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js";

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message")); // we get the input of the user; used to build the temp ui.
    formRef.current.reset(); // reset the form.
    await sendMessage(formData); // sending the data to the server asynchronosly.
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => ( // getting the newly sent messages, mapping them into dom elements (optimistic UI).
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}> {/* Just a simple form with action and ref*/}
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

// Putting the Thread component in action by providing a state.
export default function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

  // Using useEffect hook to fetch data.
  export const UserProfile = () => {
    const [userDetails, setUserDetails] = useState(null);

    useEffect(()=>{
      getUserDetails() // async function
        .then(data => {
          setUserDetails(data);
        })
        .catch(error => console.log(error))
    },[])

    if (!userDetails) return <p>Loading...</p>

    return (
      <p>{userDetails.name}</p>
    )

  }

  // Using use hook to fetch data.
  export const UserDetails = () => {  // another component for simplicity
    const userDetails = use(getUserDetails());
    return (
       <p>{userDetails.name}</p>
    )
  }

  export const UserProfile = () => {
    return (
      <Suspense fallback={<p>Loading...</p>}>
      <p>{userDetails.name}</p>
      </Suspense>
    )
  }

// Using useContext hook to consume the theme context.
const theme = useContext(ThemeContext);

// Using use hook to consume the theme context
const theme = use(ThemeContext);

// Before
export const ProfilePicture = forwardRef(
  (props, ref) => ( // src and alt are props
    <img ref={ref} {...props}/>
  )
)

// On v19
export const ProfilePicture = (ref, ...props) => {
  <img ref={ref} {...props}/>
}