feat(curriculum): adding frontend libraries chapter review page (#59951)

Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com>

curriculum/challenges/english/25-front-end-development/review-react-forms-data-fetching-and-routing/67c9e932c6c4234532d46394.md

@@ -65,6 +65,34 @@ function App() {
 export default App;
 ```
 
+## Working with the `useActionState` Hook
+
+- **Server Actions**: These are functions that run on the server to allow form handling right on the server without the need for API endpoints. Here is an example from a Next.js application:
+
+```js
+"use server";
+
+async function submitForm(formData) {
+ const name = formData.get("name");
+ return { message: `Hello, ${name}!` };
+}
+```
+
+The `"user server"` directive marks the function as a server action.
+
+- **`useActionState` Hook**: This hook updates state based on the outcome of a form submission. Here's the basic syntax of the `useActionState` hook:
+
+```js
+const [state, action, isPending] = useActionState(actionFunction, initialState, permalink);
+```
+
+- `state` is the current state the action returns.
+- `action` is the function that triggers the server action.
+- `isPending` is a boolean that indicates whether the action is currently running or not.
+- `actionFunction` parameter is the server action itself.
+- `initialState` is the parameter that represents the starting point for the state before the action runs.
+- `permalink` is an optional string that contains the unique page URL the form modifies.
+
 ## Data Fetching in React
 
 - **Options For Fetching Data**: There are many different ways to fetch data in React. You can use the native `Fetch` API, or third party tools like Axios or SWR. 
@@ -201,6 +229,56 @@ const FetchTodos = () => {
 export default FetchTodos;
 ```
 
+## Working with the `useOptimistic` Hook
+
+- **`useOptimistic` Hook**: This hook is used to keep UIs responsive while waiting for an async action to complete in the background. It helps manage "optimistic updates" in the UI, a strategy in which you provide immediate updates to the UI based on the expected outcome of an action, like waiting for a server response.
+
+Here is the basic syntax:
+
+```js
+const [optimisticState, addOptimistic] = useOptimistic(actualState, updateFunction);
+```
+
+- `optimisticState` is the temporary state that updates right away for a better user experience.
+- `addOptimistic` is the function that applies the optimistic update before the actual state changes.
+- `actualState` is the real state value that comes from the result of an action, like fetching data from a server.
+- `updateFunction` is the function that determines how the optimistic state should update when called.
+
+Here is an example of using the `useOptimistic` hook in a `TaskList` component:
+
+```js
+"use client";
+
+import { useOptimistic } from "react";
+
+export default function TaskList({ tasks, addTask }) {
+  const [optimisticTasks, addOptimisticTask] = useOptimistic(
+    tasks,
+    (state, newTask) => [...state, { text: newTask, pending: true }]
+  );
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+
+    addOptimisticTask(formData.get("task"));
+
+    addTask(formData);
+    e.target.reset();
+  }
+
+  return <>{/* UI */}</>;
+}
+```
+
+- **`startTransition`**: This is used to render part of the UI and mark a state update as a non-urgent transition. This allows the UI to be responsive during expensive updates. Here is the basic syntax:
+
+```js
+startTransition(action)
+```
+
+The `action` performs a state update or triggers some transition-related logic. This ensures that urgent UI updates (like typing or clicking) are not blocked.
+
 ## Working with the `useMemo` Hook
 
 - **Memoization**: This is an optimization technique in which the result of expensive function calls are cached (remembered) based on specific arguments. When the same arguments are provided again, the cached result is returned instead of re-computing the function.