🪝 Hooks Pattern

⚡️ The Latest In React

🆓 275 Free Public APIs
Looking for an API for your next project? Free Public APIs has 275+ free, daily-tested APIs to get started with your practice project. Perfect for building and experimenting.

🚄 Bulletproof React has been updated for Next.js!
Bulletproof React offers a simple, scalable architecture for production-ready React apps. With the recent addition of Next.js, it's even more powerful and flexible for developers.

🪝 Hooks Pattern
Before React Hooks, class components were essential for adding state and lifecycle methods. While Hooks aren't a design pattern themselves, they are crucial in modern application design, often replacing traditional patterns.

📝 Senior Developer? Let’s See How You Handle This Code Challenge
In his final Atlassian interview, Rahul was hit with a curveball: the interviewer handed him a small piece of code to review for improvements. Completely blindsided, he struggled to keep up with the unexpected challenge. See if you can handle it.

📚️ Why React Server Components are a leap forward for content-driven websites
When building content-driven sites, transforming content before rendering is crucial. Instead of fetching images client-side, the optimal approach is using React Server Components—offering the best user experience and developer experience, without the usual trade-offs.

React 19 Actions

React 19 introduces Actions, making asynchronous tasks like form submissions simpler. This tutorial covers how Actions work, along with new hooks such as useActionState and useFormStatus.

• Actions in React 19: Simplify form handling by automating async tasks.

• New Hooks: useActionState and useFormStatus manage form state and transitions.

React 18 Form Submission Example

In React 18, forms require manual state management for tasks like tracking pending states:

// Form submission in React 18
console.info('React 18 form');

const [name, setName] = useState('');
const [isPending, setIsPending] = useState(false);

const handleChange = (event) => {
  setName(event.target.value);
};

const handleSubmit = (event) => {
  event.preventDefault();
  setIsPending(true);
  setTimeout(() => {
    // call API
    setIsPending(false);
  }, 500);
};

return (
  <form>
    <input type="text" name="name" onChange={handleChange} />
    {isPending ? <p>Loading...</p> : <p>Hello in React 18, {name}</p>}
    <button onClick={handleSubmit} disabled={isPending}>
      Update
    </button>
  </form>
);

With React 19, the process becomes easier with Actions and new hooks, which automatically manage transitions:

function Loader() {
  const { pending } = useFormStatus();
  return <div>{pending && 'Loading...'}</div>;
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      Update
    </button>
  );
}

function Name({ name }) {
  return <p>Hello in 19 {name}</p>;
}

function App() {
  console.info('React 19 form');

  const [state, formAction] = useActionState(submitAction, { name: '' });

  return (
    <form action={formAction}>
      <input type="text" name="name" />
      <Loader />
      <SubmitButton />
      <Name name={state?.name} />
    </form>
  );
}

With React 19, handling asynchronous form submissions is more streamlined, improving both developer and user experiences. Make sure to check out the full tutorial for more on how to implement your own React Actions.