diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md index 8caf9af5799..bedf72abd2f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md @@ -2,13 +2,111 @@ id: 67d1a928ae86929a85c1bb6b title: How Do Forms Work in React? challengeType: 11 -videoId: nVAaxZ34khk +videoId: t9ax7VY00m0 dashedName: how-do-forms-work-in-react --- # --description-- -Watch the video lecture and answer the questions below. +Watch the video or read the transcript and answer the questions below. + +# --transcript-- + +How do forms work in React? + +Forms are fundamental to every web application because they let you handle user input, collect data, and trigger actions. + +In React, forms are managed using state or refs, giving you full control over their behavior and validation. These two ways to manage forms are called "controlled" and "uncontrolled" input. + +Let's look at what controlled and uncontrolled inputs are. + +Controlled input is the most "React-like" way to handle form inputs. With controlled inputs, you store the input field value in state and update it through `onChange` events. This gives you complete control over the form data and allows instant validation and conditional rendering. + +The process works like this: React maintains the form state with the `useState` hook, and you update it on every change. When a user types in an input field, the `onChange` event fires, updates the state, and React re-renders the component with the new value. + +```js +import { useState } from "react"; + +function App() { + const [name, setName] = useState(""); + + const handleChange = (e) => { + setName(e.target.value); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + console.log(name); + }; + + return ( + <> +
+
+ + +
+ + ); +} + +export default App; +``` + +The benefits of controlled inputs include the following: + +- Immediate access to the form data. + +- You can implement instant validation. + +- You can conditionally disable the submit button. + +- You can control the input value programmatically. + +Uncontrolled inputs on the other hand are seen more in traditional HTML forms. So, instead of handling the inputs through the `useState` hook, uncontrolled inputs in HTML maintain their own internal state with the help of the DOM. + +Since the DOM controls the input values, what you need is to pull in the values of the input fields with ref. This approach requires less code and performs better because refs do not make React re-render. + +Here's an example of uncontrolled inputs: + +```js +import { useRef } from "react"; + +function App() { + const nameRef = useRef(); + + const handleSubmit = (e) => { + e.preventDefault(); + console.log(nameRef.current.value); + }; + + return ( +
+ {" "} + + +
+ ); +} + +export default App; +``` + +One very noticeable advantage of uncontrolled inputs is that they require less code. They also perform better and feel more natural to React beginners who are familiar with HTML. + +So, which should you use between controlled and uncontrolled inputs?  + +Use controlled inputs when you need dynamic form updates, real-time validation, or when you want to sync input values with state. They provide better control but require more re-renders. + +Use uncontrolled inputs when you need simpler forms, want to access values only on submission, or when you're working with non-React code. + +Regardless of which you use between controlled and uncontrolled inputs, here are some best practices you should adhere to while making forms in React: + +- Always prevent the default form submission. + +- Ensure you validate inputs before submission. + +- Always provide clear feedback to users with loading, validation errors or other related states. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md index 85f279e1728..71bb674daa8 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md @@ -2,13 +2,264 @@ id: 67e2a4cab99d4e8bc795e99d title: What Is the useActionState Hook, and How Does It Work? challengeType: 11 -videoId: nVAaxZ34khk +videoId: GARlXz-vIFg dashedName: what-is-the-useactionstate-hook-and-how-does-it-work --- # --description-- -Watch the lecture video and answer the questions below. +Watch the video or read the transcript and answer the questions below. + +# --transcript-- + +What is the `useActionState` hook and how does it work? + +React 19 came with two notable new features called server components and server actions.  + +From that version onwards, server components became the default in frameworks like Next.js that readily support them. + +Server actions on the other hand, are functions that run on the server to allow form handling right on the server without the need for API endpoints. + +A server action looks like this: + +```js +"use server"; + +async function submitForm(formData) { + const name = formData.get("name"); + return { message: `Hello, ${name}!` }; +} +``` + +This server action extracts a `name` field from a form and returns a string greeting that name. + +To simplify state management for server actions and remove the need for client-side JavaScript for simple forms, the React team introduced the `useActionState` hook in version 19. + +Let's take a closer look at this hook and see how it works. + +The React documentation describes the `useActionState` hook as a hook that "allows you to update state based on the result of a form action." + +But this doesn't mean that you can only use the `useActionState` hook with forms. You can also use it to manage button clicks and other events, as long as you have an action in place. + +And keep in mind that, since `useActionState` is a hook, you cannot use it inside a server component. + +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. + +- The `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. + +To use the `useActionState` hook, make sure you have an action in place first. Let's use the action from the previous example for this, with a bit of a twist: + +```js +"use server"; + +export async function submitForm(_, formData) { + const name = formData.get("name"); + + const hour = new Date().getHours(); + let greeting; + + if (hour < 12) { + greeting = "Good morning"; + } else if (hour < 18) { + greeting = "Good afternoon"; + } else { + greeting = "Good evening"; + } + + return { message: `${greeting}, ${name}` }; +} +``` + +In your component, you then need to import the `useActionState` hook and call it at the top level of the component body (before the return statement) just like other hooks. You should also import the action: + +```js +"use client"; + +// Import the useActionState hook +import { useActionState } from "react"; + +// Import the submitForm action +import { submitForm } from "./actions/submitForm"; + +const Greeter = () => { + + // Initialize the hook + const [state, submit, isPending] = useActionState(submitForm, { + message: "", + }); + + return ( +
+ {/* Rest of component */} +
+ ); +}; + +export default Greeter; +``` + +Here's what the full code looks like with a bit of styling: + +```js +"use client"; + +import { useActionState } from "react"; +import { submitForm } from "./actions/submitForm"; + +const Greeter = () => { + const [state, submit, isPending] = useActionState(submitForm, { + message: "", + }); + + return ( +
+
+

+ Greet Someone +

+ + + + + + {state.message && ( +

+ {state.message} +

+ )} +
+
+ ); +}; + +export default Greeter; +``` + +In the browser, you would see your form button change from `Greet` to `Greeting...` while the action `isPending` - and the greeting would show `Good morning, {name}`, `Good afternoon, {name}`, or `Good evening, {name}`, depending on what time of day the form was submitted. + +Remember how we mentioned that you can also use the `useActionState` hook outside of a form? + +In this example, we'll fetch five users from JSONPlaceholder with a button click: + +```js +"use server"; + +export async function getUsers() { + const res = await fetch( + "https://jsonplaceholder.typicode.com/users?_start=0&_limit=5/" + ); + return await res.json(); +} +``` + +Here's the styled UI: + +```js +"use client"; + +import { useActionState } from "react"; +import { getUsers } from "./actions/getUsers"; + +export default function FetchUsers() { + const [users, fetchAction, isPending] = useActionState(getUsers, []); + + return ( +
+ + + +
+ ); +} +``` + +In the browser, you would see that the button text is never updated to `Fetching Users...` after it's clicked. + +This happens because React treats data fetching and rendering as a higher priority than the `isPending` state, which blocks `isPending` in the process and throws an error. + +To fix this issue, you need to wrap the action in `startTransition`: + +```js +"use client"; + +import { useActionState } from "react"; +import { getUsers } from "./actions/getUsers"; + +// import startTransition from React +import { startTransition } from "react"; + +export default function FetchUsers() { + const [users, fetchAction, isPending] = useActionState(getUsers, []); + + return ( +
+ + + +
+ ); +} +``` + +If you're wondering what `startTransition` is, it's a function that tells React that a state update is of low-priority and can be interrupted. This keeps the UI responsive while handling asynchronous updates like server actions. + +That's how to use the `useActionState` hook inside and outside a form. # --questions--