use() Example

A comprehensive tutorial on the new features of React 19, including detailed explanations of its capabilities and demonstrations showcasing its functionality. Welcome to React 19, where innovation and simplicity come together! React 19 is on its way, bringing fresh improvements to front-end development. As developers, we’re used to manually optimizing performance by memoizing components to prevent unnecessary re-renders. But with React 19, things are changing. This will be the major change in React 19, and there are many other improvements too. In this blog post, you’ll explore the latest enhancements in React 19, giving you the power to create great web applications.
# React Optimising Compiler Previously, we (developers) relied on useMemo, useCallback, and memo APIs for performance optimization. However, React’s new automatic reactivity compiler, known as React-Forgot changes the game. This smart compiler dynamically manages re-renders, determining when and how to update both the state and UI. As a result, the need for manual optimization using useMemo, useCallback, and memo APIs is eliminated, simplifying development while enhancing performance.
# use() Hook The use hook is a powerful tool in React that allows us to load resources asynchronously, particularly fetching data. It tracks the loading state using suspense and handles errors with error boundaries. However, it’s essential to note that the use hook doesn't offer a comprehensive solution for handling asynchronous state. Notably, it lacks support for query promise cancellation. Additionally, developers must handle loading and error states at the parent level rather than within the same component, and explicit access to the loading and error variables isn't provided. Below is an example code demonstrating data fetching using the use hook const fetchPosts = async () => { const res = await fetch("https://jsonplaceholder.typicode.com/posts"); return res.json(); }; const Posts = () => { const [isFetchPost, setIsFetchPost] = useState(false); let data; if (isFetchPost) { data = use(fetchPosts()); } return (

use() Example {data && data?.map(data => { return {data.body}; })}

); }; const UseExample = () => { return ( Loading...}> ); }; ![use hook](//images.ctfassets.net/1wohri349roq/7yznSny25z3tiLK4gGJsUz/7f7660b6ad735e12f20aa905825253a1/1_wN2Zkzu_gnrnRyXY_h5iMA.gif)
Another area where we can utilize the new hook is with Context. Instead of using useContext(), we can simplify it to something like use(context). Below is an example code demonstrating reading context value using use hook. ```js type Theme = "light" | "dark"; type ThemeContextValue = { theme: Theme; toggleTheme: () => void; }; const ThemeContext = createContext(null); const ThemeProvider: React.FC = ({ children }) => { const [theme, setTheme] = useState("light"); const toggleTheme = () => { setTheme(theme => (theme === "dark" ? "light" : "dark")); }; return ( {children} ); }; const useTheme = () => { const themeContextValue = use(ThemeContext); if (!themeContextValue) { throw new Error("Please wrap component within the theme provider"); } return themeContextValue; }; const ThemeExample = () => { const { theme, toggleTheme } = useTheme(); return (

Current Theme :{theme}

); }; const UseExample2 = () => { return ( use() Example (context) ); }; ```
# Server and Client Directives React now includes built-in support for server and client directives. Components can now be rendered on the server, leading to improved performance, faster page load times, and simplified data fetching with server components. `use server` `use server` makes the server-side functions that can be called from client-side code. ```js async function addToCart(data) { 'use server'; // ... } ``` ```js 'use client'; import { useState } from 'react'; import { formatDate } from './formatters'; import Button from './button'; export default function RichTextEditor({ timestamp, text }) { const date = formatDate(timestamp); // ... const editButton = ); }; const ActionExample = () => { const [post, _addPost] = useState([]); const addPost = (post: FieldType) => { _addPost(prev => [...prev, post]); }; return (

Form Action Example {post && post?.map(post => { return ( {post?.title} {post?.body} ); })}

); }; export default ActionExample; ```
# useFormState() Hook The useFormState hook keeps the state updated based on the result of form actions. It requires passing the form action function along with an initial state. The hook returns a new action and the latest form state, facilitating seamless form management. The latest form state is also passed to the function you provided. ```js const [state, formAction] = useFormState(fn, initialState, permalink?); ``` ### Parameters `fn:` This is the function called when the form is submitted, or a button is pressed. It receives the previous form state initially set to initialState, and its previous return value, followed by any additional arguments expected by the form action.
`initialState:` This is the initial state value we want to set. It can be any serializable value. After the first invocation of the action, this parameter is ignored.
`optional permalink:` This optional parameter contains a unique page URL modified by the form. It's useful for pages with dynamic content (like feeds) and progressive enhancement. ### Returns `The current state:` Initially matches initialState. After the action is invoked, it matches the value returned by the action.
`A new action:` This can be passed as the action prop to our form component or as the formAction prop to any button component within the form. Now, let’s explore an example with some code.