• React Compiler
• use() hook
• actions
• Server Components
• useFormStatus() hook
• useFormState() hook
• No more React.lazy
• <Context.Provider> replaced with <Context>
• ref is passed as a regular prop( no more forwardRef)
• Document Metadata for SEO
• Asset Loading and more...

By using actions we can send the data from the client to the server. we can add action to elements like <form/>.

Actions are used for both Client Side and Server Side Components

Actions allow us to pass a function to DOM elements such as <form/>

<form action={search}>
  <input name="search" />
  <input type="submit" value="Search" />
</form>

'use server' directive is used only if we’re using React Server Components.

'use server' we can call the server-side functions into client-side code.

Because of adding 'use server' directive at the top of an async function body, that function can called by the client.

async function createUser(userInfo) {
    'use server';
    // your code
}

• 'use server' must be at the very beginning of their function or module
• 'use server' can only be used in server-side files. The resulting Server Actions can be passed to Client Components through props
• The directive must be used on a module level
• 'use server' can only be used on async functions.

export default function App() {
  return (
   <form action={requestUsername}>
      <input type="text" name="username" />
      <button type="submit">Request</button>
   </form>
  );
}

In the above example, "requestUsername" serves as a Server Action function which is attached to <form> action. 

When a user submits this form, there is a network request to the server function requestUsername
 
In React, when a Server Action is called within a form context, the framework automatically provides the FormData object as the first argument to the Server Action function requestUsername.

By using 'use client' directive we can decide what code needs to run on the client side.

We have to define the 'use client'  directive at the top of a file means before all the imports as shown in the code

Note:  a component can still be evaluated on the client even if it does not have a 'use client' directive.

1. use client must be at the very beginning of a file, above any imports. It must be enclosed in either single or double quotes, but not backticks
2. When a 'use client' module is imported from another client-rendered module, the directive has no effect.

By using the useFormState Hook We can update the state based on the result of a form action.

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

Example:

import { useFormState } from "react-dom";

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

By using useFormStatus Hook we can get the status information of the last form submission.

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

this hook does not accepts any parameter

This hook will return a status object with the following properties

pending: true | false

if the pending value is true the <form> is pending submssion otherwise false

data: it contains the form data as a FormData object  that is submitted, if not submitted FormData object contains null

methods: It contains form method GET or POST

action: A reference to the function passed to the action prop on the parent <form>. If there is no parent <form>, the property is null

By using the use hook, we can read the value of a resource like a Promise or context.

const value = use(resource);

Note: Unlike useContext, use can be called in conditionals and loops like if. It may replace useContext hook

We can also fetch data from the server in some cases, it may replace useEffect hook

By using  useOptimistic hook we can apply the temporary updates to the UI while waiting for things like the server to respond

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

This hook will accept two parameters:

state: the value to be returned initially

function: a function that takes the current state and the optimistic value  as parameters

This hook will return an array with two values:

optimisticState: The resulted optimistic state

addOptimistic: addOptimistic is the dispatching function to call when you have an optimistic update.

React Compiler will automatically re-render the components just the right parts of the UI when the component state changes. 

Note: To avoid unnecessary re-renders of a component we have used useCallback() , useMemo() hooks, and memo() function. Because of React Compiler we may not use them

1. useFormStatus()
2. useFormState()

npm install react@experimental

npm install react-dom@experimental