A first look at <mark>React 19</mark>


The beta release of React 19 has just been released. There are some great quality of life improvements and some new things.

## The quality of life improvements in React 19

There are quite a few improvements to the existing parts of React:

- You no longer need `forwardRef`
- Put document metadata anywhere in your JSX
- Preloading resources to improve performance
- Better error messages

### Goodbye `forwardRef`

A `ref` can now be passed as a prop. This was possible before using a prop name other than `ref` such as `buttonRef`, but now you can access the `ref` as a prop in your component without `forwardRef`:

```jsx
function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}
```

### Metadata in JSX

React 19 has official support for metadata inside components. Before React 19 you would need a package like [`react-helmet-async`](https://www.npmjs.com/package/react-helmet-async) to achieve this.

With the example below, the meta title and other related items will be updated inside the `<head>` tag of your page.

```jsx
function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}
```

Stylesheets are supported too:

```jsx
function Component() {
  return (
    <Suspense fallback="loading...">
      <link rel="stylesheet" href="foo" precedence="default" />
      <article class="foo-class bar-class">
        {...}
      </article>
    </Suspense>
  )
}
```

### Better error messages

Errors were previously thrown twice by an Error Boundary, and then logged using `console.error` to show you more information about the error. In React 19, you will see a single error with all the information you need. This is a very welcome change as it declutters your debugging console.

## The new parts of React 19

- Asyncronous functions in transitions
- A new `useActionState` hook
- Form actions in `react-dom` and `useFormStatus`
- A new `useOptimistic` hook
- new `use` API
- Custom element support (web components)

### Asyncronous functions in transitions

Traditionally you could already use `useState` or alternative state management solutions to manage all the various data, loading, and error states in your forms.

React 18 released the [`useTransition` hook](https://react.dev/reference/react/useTransition). This hook lets you update state without blocking the UI. This helps keep the UI updates responsive on slower end-user devices like older phones, and was a useful addition to managing state.

The `useTransition` hook can now start a transition with an `async` function. In the following example, React will manage the state of `isPending` for you, which can save you some boilerplate logic you would previously have to write using `useState`. While your `async` function is running `isPending` will be `true`. After the `async` function succeeds `isPending` will automatically be set to `false`.

```jsx
function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}
```

### The new `useActionState` hook

Asyncronous transitions are called "actions" by convention in React. A new `useActionState` hook was introduced that helps handle the most common use-cases for actions.

The `useActionState` can handle `error` and `isPending` states. If you've used [TanStack Query](https://tanstack.com/query/latest) or [Redux Toolkit Query](https://redux-toolkit.js.org/rtk-query/overview) before, you could see this as a simpler alternative for when you don't need the additional features from those libraries. Note that these sorts of libraries still provide many additional options that could benefit your user's experience.

```jsx
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}
```

### Form Actions in `react-dom`

Updates have been made to `react-dom` that make implementing these actions even easier.

You can now pass an `async` function to a form's `action` attribute:

```jsx
<form action={actionFunction}>
```

When the `actionFunction` returns successfully, the form will be reset automatically for uncontrolled components (components where you don't manage the state via `useState` or other state management options).

You can also add the `action` to an `<input>` or a `<button>`.

A new hook `useFormStatus` is now also available, which lets you check the form status in child components in a form:

```jsx
import {useFormStatus} from 'react-dom';

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

I've used this hook before in a test application built with Next.js when the hook was still experimental, so it's good to see this hook available without the experimental warning.

Here is a snippet from an [`UploadButton`](https://github.com/EddyVinck/customer-statement-processor/blob/main/src/components/file-upload/upload-button.tsx) component I made which utilizes [server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) in Next.js:

```jsx
"use client";

import { experimental_useFormStatus as useFormStatus } from "react-dom";

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button className="bg-slate-600 p-2 px-6 rounded-md" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}
```

What I like about this, is that it removes the need for a lot of boilerplate code originally required to manage your form state. Passing props or providing a custom React Context is not necessary in a lot of cases now, which is great!

### The new `useOptimistic` hook

There is a new hook that helps with managing optimistic UI. The Remix documentation has a good defintion for optimistic UI if you're unsure what it means:

> **Optimistic UI**: Optimistic UI enhances perceived speed and responsiveness by immediately updating the UI with an expected state before the server's response is received
>
> &mdash; <cite>Remix documentation ([link](https://remix.run/docs/en/main/discussion/pending-ui))</cite>

In the following example, the `useOptimistic` will render the submitted name immediately when the form submits. When the submit action finishes or errors, React will then continue to use the `currentName` again.

```jsx
function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}
```

### The new multifunctional `use` API

React has introduced a new flexible API with multiple use-cases. It's just called `use`, and according to the official React 19 beta announcement article you can use it to "read resources in render." Practically, it means you can use it for reading promises (which is useful when you're using [`Suspense`](https://react.dev/reference/react/Suspense)) and reading a React Context.

```jsx
import {use} from 'react';
import ThemeContext from './ThemeContext'

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  const theme = use(ThemeContext);

  return comments.map(comment => <p style={{color: theme.color}} key={comment.id}>{comment}</p>);
}

function Page({commentsPromise}) {
  // When `use` suspends in Comments,
  // this Suspense boundary will be shown.
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  )
}
```

See the official [`use` documentation](https://react.dev/reference/react/use) page for more information.

### Support for web components in React

Web components (or [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)) are now fully supported in React. Previously there were some issues when using custom elements in React, but now they should behave as you would expect when doing Server Side Rendering or Client Side Rendering.

## Should you upgrade to React 19?

React 19 is in beta right now. The React team recommends waiting until frameworks have implemented it under the hood before you upgrade to React 19 for your application.

This release is mostly to prepare library authors, so that all your favorite React libraries will be ready when React 19 goes out of beta. There are great improvements and features in this new React version, but we will have to wait until our favorite React frameworks have implemented them.

For the full release notes, see the full [React 19 beta release notes on react.dev](https://react.dev/blog/2024/04/25/react-19). If you're curious what changes you need to make when upgrading, be sure to take a look at [the official React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).


Senior frontend engineer. Loves his work. Loves sharing

How to share components across different frameworks from a single code base? How to implement Lit (web components) to React & Angular?

Add an agnostic UI library in <mark>Nx monorepo</mark>, share across the <mark>frameworks</mark>



In my other [article](./setup-monorepo), we created an Nx monorepo and added Angular and React applications that we managed to run together. Now it's time to take another step and create an agnostic UI library.

# Why are we doing this?

We are learning how multiple teams in big enterprises work together. Where multiple structures are in place and teams have to manage all these projects. Although the frameworks betweens may differ, they have something in common. And that's the UI, because the UX should be consistent.
It can't be that in one application the primary button is blue and in another it's green.

![Add UI library to nx](images/add-ui-library-6.png)

To achieve this, you have to share the UI library across the frameworks. And it should be an agnostic UI library, otherwise you can't easily share an Angular component directly with React applications (or vice versa). And don't forget, it should also be developer friendly.
Since we have the Nx monorepo, we can create a library like that.
After we are finished, it will be like this (you can show this graph with the `nx graph` command):

![Add UI library to nx](images/add-ui-library-5.png)

## Choosing the Library

When I did some research I discovered two potentially interesting options for UI libraries. Both looking good:

- [StencilJS](https://StencilJS.com/)
- [Lit](https://lit.dev/)

Both have their pros and cons. Let's dive in.

### StencilJS

Initially, StencilJS seems perfect for our use case. It has automatic generators and wraps around the frameworks. It looks amazing because this way every developer can work with the UI library natively. Unfortunately when I try to implement it into the Nx monorepo I encounter big challenges due the bugs in [nxext/stencil package](https://www.npmjs.com/package/@nxext/stencil). On top of that, it's not really compatible with Angular 17 and React 18. Maybe in the future we can try again.

![Stencil bug](images/add-ui-library-7.gif)

### Lit

From my past experiences, I already knew the Lit and web components. And I know that we can use Lit in our applications when it's compiled to web components. But still, I did my homework and did additional research on Lit.

![Lit](images/add-ui-library-8.png)

#### What is Lit

Initially, Lit is a simple library for building fast, lightweight web components. So when you create a component with Lit, it builds into a web component. Then you can use this web component in Angular, React, Vue applcations and even directly in HTML pages. So it looks perfect for us.

## Installing Lit to the Nx Monorepo

First, we have to install the Nx/JS library (if it's not already installed):

```bash
npm i -D @nx/js
```

We are installing dev dependencies because we will only use it to generate libraries and not use it in the runtime.

Then, create a library in the Nx monorepo (of course you can choose the directory):

```bash
nx generate @nx/js:library --directory=libs/ui
```

For personal preference and I think better management, I want to install my UI library under the libs folder. Now we have a shared library.

Installing Lit:

```bash
npm i lit --save
```

To better understanding we will create a simple LitElement. Just create a .ts file under libs/ul/src/lib/yourcomponentname/yourcomponentname.ts (you can choose the folder structure).
And create a simple button with LitElement:

```typescript
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';


@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
   static override styles = css`
   button {
     background-color: blue;
     color:white;
   }
 `;
   @property()
   name?: string = 'World';


   override render() {
       return html`<button>Hello, ${this.name}!</button>`;
   }
}
```

Now we have to export the component. To do that just write a single line into `ui/src/index.ts`:

```typescript
export * from './lib/components/simple-greeting';
```

## Using LitElement Component in an Angular App

Now the fun part begins. We just created our first component and we need to use it in our applications. Let's start with our Angular application. In order to use web components in Angular applications, you need to add CUSTOM_ELEMENTS_SCHEMA into your component.

```typescript
schemas: [CUSTOM_ELEMENTS_SCHEMA];
```

Now we are importing our library with

```typescript
import 'libs/ui/src/index';
```

After importing we can use our component with:

```html
<simple-greeting name='Earth'></simple-greeting>
```

![Add UI library to angular](images/add-ui-library-1.png)

## Using Lit Element Component in React App

For React applications unfortunately we can't directly use them. So we need to wrap the component using `@lit/react`. First we need to install it:

```bash
npm i @lit/react --save
```

Then we need to update the component:

```typescript
import { createComponent } from '@lit/react';
import * as React from 'react';


// Existing component code...


export const SimpleGreetingComponent = createComponent({
   tagName: 'simple-greeting',
   elementClass: SimpleGreeting,
   react: React
});
```

Now we can use our component in the React application. To do that you need to import it and use it like a React component:

```typescript
import { SimpleGreetingComponent } from "ui/src/index";
<SimpleGreetingComponent name='Earth' />
```

![Add UI library to react](images/add-ui-library-2.png)

### Handling Errors

When I implement my component to the React application I encounter some difficulties. Maybe you will have the same difficulties as well. So here are my solutions:

#### Reflect Metadata error

![Add UI library to react error](images/add-ui-library-3.png)

If you encounter this error, just install the `reflect-metadata` package to you dev dependencies:

```bash
npm i reflect-metadata --save-dev
```

Then import to your web component:

```bash
import "reflect-metadata";
```

#### For property errors

![Add UI library to react error](images/add-ui-library-4.png)

If you have this error, you can change your properties like

```typescript
static override properties = { name: { type: String } }
name = 'World';
```

That will solve the problem.
More details [here](https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields)

## Conclusion

Now we have two applications using the same UI library from a single code base. We can extend this library and add other components like cards, inputs ect.

!["Adding UI library celebration"](images/setup-monorepo-10.gif)


Running multiple applications together with Nx Monorepo.

How to setup monorepo with <mark>Angular</mark> And <mark>React</mark> running together



As a frontend engineer you must have wondered at least once in your life how big companies can run multiple architectures in a single code repo and how to develop all together, making the teams collaborate from a single codebase. For example some teams can develop applications with React, some with Angular and others with Vue.

Hundreds of developers are trying to merge something into code, thousands of lines of code and files are changing... It should be a hell of a mess. But how can they manage all these things?

Well here is the answer:

# First things first

What is in my mind is to first create Angular and React applications together. First I tried to create a folder and in that folder, I created two folders called angular and react (I'm also confused when I write this). Next I tried to start the applications in their folder. But it creates a mess. And it’s so hard to handle.

For instance every application has a package.json file and node_modules folders. And you know the meme right?

!["Node Modules meme"](images/setup-monorepo-6.png)

So if I want to have a single package.json and node_modules folder and single configuration file etc I have to find a solution.
And here comes to concept of monorepo:

!["Mono Repo"](images/setup-monorepo-7.gif)

## What is monorepo

In a normal multi repo structure, many projects are held in entirely separated, version-controlled repositories. But monorepo is a single version-controlled repository which contains many applications, living together side by side and helping each other to become better applications (Ok, I know this is a little exaggerated).

!["Mono Repo vs Multi Repo"](images/setup-monorepo-8.png)

## Choosing monorepo tool

So now we learned about the existence of monorepo. That's cool but how can we create a monorepo? Is there a tool for it? Or do I need to make it manually?
If you do search for monorepo tools like I did, you'll probably look like this:

!["Mono Repo Tools"](images/setup-monorepo-9.gif)

Because there are many good monorepo tools such as:

* Bazel
* Gradle
* Lage
* Lerna
* moon
* Nx
* Pants
* Rush
* TurboRepo

Well I did my research and decided to choose Nx, because:

* Full support of Javascript and Typescript.
* Fast
* Code Sharing
* Code standards
* Deployments
* Versioning

and many more features. Check out their website for the details: [why NX](https://nx.dev/getting-started/why-nx)

So let's dive in, shall we?

### Creating workspace

Now we will do some magic with Nx CLI. First we have to create a workspace.
We'll create a workspace with Angular. You can also start with React or Vue, it's your choice. I'm familiar with Angular so I'll start with that.

You don't need to install the entire Nx CLI. With the npx feature you can directly run the Nx CLI command with ``npx create-nx-workspace@latest``.

It will ask some questions to set up your workspace. The **most important** thing is selecting integrated monorepo. Because we will add a React application and a UI library later.
Then let the magic happen.

!["Setup MonoRepo for angular"](images/setup-monorepo-1.png)

For the other settings, you can select whatever you prefer. For example you can skip installing e2e tests or you can select esbuild over webpack.

Now we have created our monorepo with an Angular app 🎉. Wanna see your angular app? Just run the ``nx serve angular`` command.

![Run Angular in monorepo](images/setup-monorepo-4.png)

### Before we continue

I have to tell this because it saves a lot of time. Since we are continuing with Nx there is a great extension for your favorite IDE or editor. You can download Nx extensions for VSCode or JetBrains IDE's (like Webstorm and IntelliJ) from the [NX website](https://nx.dev/core-features/integrate-with-editors).

## Adding React Application

Now we have an Angular app. But let's do something fun... Adding a React application into our monorepo. Why? Because we can. And it shows that in real life use, it is possible for different teams within the same company to choose their preferred frontend framework.

To add a React application we need to install the nx/react package. In order to do that just install a normal npm package with ``npm add -D @nx/react``. Note: we are installing for dev only because we don't need it in the runtime. Just for generating a React application.
Then create a React application with the command ``nx g @nx/react:app my-new-app``.

After Nx finishes the setup, we now have a React and an Angular app 🥳.

!["Setup MonoRepo for react"](images/setup-monorepo-2.png)

You can run the React application with ``nx serve react``.

![Setup MonoRepo for React](images/setup-monorepo-5.png)

## Run Angular and React app together

We had a great start. We have an Angular app and a React app in a single monorepo. What if we want to run them together? They are using the same port and also we want to run them with a single command. As I stated before, Nx has great features. You can run all your applications with ``nx run-many --target=serve --all``. Or if you want to select which applications to run just add them as projects ``nx run-many --parallel --target=serve --projects=angular,react``.
But wait. We forgot to change the port. I have changed the React application port by opening the ``project.json`` file in the ``apps/react/`` folder. And under the ``serve/options`` just add ``"port":4201`` (of course you can select your preferred port).

```json
"options": {
   "buildTarget": "react:build",
   "hmr": true,
   "port": 4201
},
```

Now when I run the serve command again we will have both applications up and running.

!["Running both applications celebration"](images/setup-monorepo-10.gif)

In my next [article](./add-ui-library-to-monorepo) we will add a UI library into our monorepo and use it in our applications. So stay tuned!


What We Want To
Share With You

A first look at React 19

Add an agnostic UI library in Nx monorepo, share across the frameworks

How to setup monorepo with Angular And React running together