DEV Community

React 19: A Game-Changer for Modern Web Development

Vishal Yadav on July 27, 2024

Introduction React, the popular JavaScript library for building user interfaces, is about to take a giant leap forward with its upcoming...

Read full post

Corentin PRUNE • Jul 27

Hello vyan, do you happen to have any source for the useForm hook? I couldn't find anything in the react source nor in the canary types. The react19 blog articles also doesn't say anything about it. This looks like a super interesting hook 🙏

@lukeocodes 🕹👨‍💻 • Jul 27

useForm was actually part of discussions for a while. Other articles exist on making a native alternative to react-hook-form.

Syakir • Jul 27

Because there is no useForm at all. This article seems misleading.
The official announcement only say about useFormStatus. react.dev/blog/2024/04/25/react-19...

where do you get useForm for? @vyan
I hope you test and research your article first before publishing it.

@lukeocodes 🕹👨‍💻 • Jul 27

useForm was actually part of discussions for a while. Other articles exist on making a native alternative to react-hook-form. I can only assume this person is using it in their own app. Be kind

Syakir • Jul 27 • Edited

You are too kind. The post is clearly published without any test and research. He mentioned forwardRef as new feature while its been around in versiom 18. He didnt even bother to update it after being pointed out.

This kind of content ruins Dev.to credibility and harm the community.

@lukeocodes 🕹👨‍💻 • Jul 28

I hate to say this, but the credibility of Dev.to posts has been questionable for a couple of years now. I have left the author a note

Horace Nelson • Jul 29

Be nice to Dev.to 😆. The quality of the content we read isn't a reflection of the platform. A lot of Dev.to authors aren't seasoned experts creating content about their area of expertise, they are would-be influencers. In the case of engineering content, there are a lot of mid-level devs writing sophomoric pseudo-documentation. And yet these guys seem to get a sick amount of likes and bookmarks (compared to me, anyway).

This could use better research and/or fact-checking. Also, the examples should be simpler; it took me 5-10 seconds of high-CPU thought to figure out exactly what was going down (🕵🏽‍♂️ 🤔 <-- me looking for the loginAPI function somewhere, or processing yet another Todo example). The best coding examples tend to be contrived.

leob • Jul 29 • Edited

Nice effort, but I've read enough in the comments below to know that I should take this info with a very, very big pinch of salt ... I decided not to bookmark it after all ;-)

Apart from that - I really dislike the idea of React becoming EVEN more dominant than it already is ...

I mean, I've always had a weak spot for Vue, because I think they're doing a LOT of things right - even first time around, while anything in React seems to need a dozen iterations before it finally becomes usable :P

Oh and libs like Svelte and Solid also have my sympathy, more than the "ordeal" which is developing with React - but hey, wait for version 19 and everything will be suddenly fantastic ;-)

@lukeocodes 🕹👨‍💻 • Jul 28

Hey @vyan, useForm is from react-hook-form. Can you update the code snippet to use the latest built in hooks? As import { useForm } from 'react'; just isn't correct.

Good post, thank you

Tensor Programming • Jul 27

How many times do they have to reinvent their state management...

Valerij • Jul 27 • Edited

github.com/facebook/react/blob/mai... - forwardRef... WTF?) useRef has been around since the beginning of the hooks... But maybe version 19 is the first version author became familiar with, so all React's "features" are "new" )))

Pa Zh • Jul 28

Hello Great articles.
Could you update the code snippet for useOptimistic ?
It only work with action, so you need a form.

import { useState, useRef } from "react";
import { useOptimistic } from "react";
import "./App.css";

async function apiAddTodo(text) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: Date.now(), text: text, status: "completed" });
    }, 2000);
  });
}

function TodoList() {
  const [todos, setTodos] = useState([]);
  const formRef = useRef();

  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [
      ...state,
      { id: Date.now(), text: newTodo, status: "pending" },
    ]
  );

  const formAction = async (formData) => {
    formRef.current.reset();
    const text = formData.get("text");
    addOptimisticTodo(text);
    try {
      const newTodo = await apiAddTodo(text);
      setTodos((currentTodos) => [...currentTodos, newTodo]);
    } catch (error) {
      console.error("Failed to add todo:", error);
      // Handle error and potentially revert the optimistic update
    }
  };

  return (
    <div>
      <form action={formAction} ref={formRef}>
        <input type="text" placeholder="Add a new todo" name="text" />
      </form>
      <ul>
        {optimisticTodos.map((todo) => (
          <li key={todo.id}>
            {todo.text} {todo.status === "pending" && "(Saving...)"}
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <>
      <TodoList></TodoList>
    </>
  );
}

export default App;

KC • Jul 31

Sorry for asking, but does react-19 support TypeScript?