State of React Wrap-up | April 26, 2022

In this State of React event, the main topic focused on the React 18 release. Our panelists had a lot of thoughts on the release, its latest features, and the React working group. We also got an update on the state of Redux, and heard about our panelists' experiences at the 2022 React Miami conference.

Here is a complete list of the hosts and panelists that participated in the online event.

Hosts

• Dustin Goodman, Engineering Manager, This Dot Labs, @dustinsgoodman
• Dane Grant, Senior Software Engineer, This Dot Labs, @danecando

Panelists

• Jen Luker, Senior Staff Frontend Engineer, Nav, Inc., @knitcodemonkey
• Ben Ilegbodu, Frontend Architect, Stitch Fix, @benmvp
• Romello Goodman, Educator at MICA & Senior Engineer, Shopify, @mellogood
• Kathleen McMahon, Senior Design Systems Engineer, Northwestern Mutual, @resource11
• Chantastic, DX Engineer, Chromatic, @chantastic
• Mark Erikson, Senior Front-End Engineer, Replay, @acemarke

You can watch the full State of React event on the This Dot Media YouTube Channel.

React 18 is finally here!!!

The conversation got started with the panelists sharing their thoughts on the latest release and why they felt like it was a little bit anti-climatic. After years of hard work and anticipation, the final release didn't generate as much noise in the community as previous versions of React. Some of the panelists believe that a lot of the blog posts and conversations about the latest changes happened months ago. This might have contributed to a quiet release this time around.

There was also praise for the React 18 working group which did a great job of communicating with the community over the years about progress of the new version. They also tried to incorporate a lot of the community feedback into this latest release. The hard work and care of the React 18 working group also contributed to the quiet and stable release of this latest version.

Does the anti-climatic release of React 18 signal that people are tired of React?

There was a question posed to the group that maybe people were tired of React and that is why it was anti-climatic. But the panelists believe that this quiet release means that React is becoming more of a standard in the JavaScript ecosystem. They also brought up the good point that a lot of developers have already been working with some of the new features before the official release date.

What do the panelists think about the new features of React 18?

One of the panelists expressed interest in trying out the new useTransition hook which allows you to specify some states as a lower priority. But they also made the point that there wasn't an immediate need in their current projects to incorporate some of the newer features. Sometimes you are comfortable working in your codebase and it is fine to use the existing hooks that are already there. It might become a situation where new developers learning React for the first time will push for the use of these new features.

This led to conversation about how React 18 helped solve a lot of problems that library authors were experiencing. For example, the new concurrent suspense and transition APIs will make it easier for loader indicators. But there was another hook mentioned that peaked the interest of some of the panelists. The useId hook generates a unique random ID that is consistent in server side and client side rendering. The panelists were excited about how easy it was to use and how it would improve on accessibility. They were also grateful that the name was changed from useOpaqueIdentifier to useId.

Will the React working group continue?

There are no current plans for the React working group, and it has been relatively quiet since the release. But the panelists do believe that this group set the tone for future major releases. As mentioned earlier, the React working group did a great job working with the community and creating a smooth transition from React 17 to React 18.

What are some of the new features that developers need to learn before migrating to React 18?

The first feature that was mentioned was the new root API. In React 17, this is how you would render your App component.

import { render } from "react-dom";
import App from "App";
render(<App tab="home" />, document.getElementById("app"));

But with React 18, you would use the new createRoot API.

import { createRoot } from "react-dom/client";
import App from "App";

const root = createRoot(document.getElementById("app"));
root.render(<App tab="home" />);

Another feature that was mentioned was flushSync which allows you to opt out of automatic batching.

The State of Redux with Mark Erikson

At this point of the conversation, we transitioned into a short powerpoint presentation on the state of Redux.
Here are the key points mentioned in that presentation.

• React-Redux v8.0 is now live.
• Redux JS/TS templates for Create React App have been updated.
• This new version works with React 16.8, 17, 18 and React Native
• React-Redux v8.0 has been converted to TypeScript
• Redux Toolkit 1.8 has a new "listener" side effects middleware which allows you to do powerful async/await workflows.
• Redux 4.2.0 has officially marked createStore as deprecated

Should people start migrating over to React 18 now or is there a waiting period?

During this part of the conversation panelists talked about what is supported by React 18. For example, if your application uses Enzyme for testing, then it will not be supported by React 18. This would require you to rewrite all of your tests just to accommodate this latest version. Developers need to understand what is supported by this new version before migrating over. The panelists also pointed out that it will take a few months of the community working with React 18 before potential issues come to light.

What was React Miami like? What was it like to have in person conferences again?

I think Mark Erikson had the best quote to sum up the 2022 React Miami conference.

"Warm, fun, awesome, tiring, weird"

Well, that works for me. :)

But in all seriousness, both Ben and Kathleen gave talks and enjoyed their time at the conference. The general consensus was that it was nice to connect with the community again in person, even if it was weird at times.

Are there any new exciting courses or articles coming out for React 18?

There was a lot of a great discussions in the React working group GitHub repository. A lot of authors were able to create great blog posts out of those discussions.

There was also a quick shout out to Dustin and Dane for their involvement with the new React beta site. You can learn more about that in this Meta case study.

The downside of React being unopinionated

Mark brought up the issue he has seen with React developers not knowing what to use for styling, state management and build tools. Since React is unopinionated, there should be a place where developers can learn about the common technologies that work well with React.

Luckily for us, This Dot Labs has created a tool to tackle this issue. react.framework.dev is a community driven list of resources for React.

Accessibility matters

In the closing conversation, there was a lot of discussion on how the new Rect 18 features will improve on accessibility. The panelists also felt like all developers should care more about creating well built accessible applications and take the time to learn about best accessibility practices.

Conclusion

This was an incredible conversation with a great group of panelists and I would highly suggest you watch the video. You can watch the full State of React event on the This Dot Media YouTube Channel.

This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdot.co