Share this
by Seven Peaks on Aug 2, 2022 11:16:00 AM
Summary & Discussion From Our Experts
On June 29, 2022, Seven Peaks Software held an online and onsite meetup, to discuss the upcoming new features in React 18. The release of React 18 came out of March 2022, with a focus on performance improvements and updating the rendering engine.
In this meetup, we will be discussing the changes that will take place in the React 18 update and what it means for the future of development. Read along!
Your Top 5 New Features In React 18:
The meetup started with Patcharanon (Non) Wongmaethanukroah presenting the changes, as well as the new features in React 18.
Non is our frontend web developer, who demonstrated the most recent major updated version of React, one of the most well-known frontend javascript libraries. Non has two years of experience at Seven Peaks Software with React typescript and the Material UI library.
For this occasion, he covered the improvements on automatic batching, new APIs like startTransition, streaming server-side rendering with support for Suspense, and concurrent features updates.
Non started off the presentation by introducing the changes done to the rendering root, as you can see from the code which shows what it was like with React 17, compared with React 18.
He then continued on talking about Typescript changes.
As recommended, if your project uses Typescript, you will need to update your dependencies types to the latest version. New types are safer and catch issues that used to be ignored by the type checker.
The most notable change is that the children prop now needs to be listed explicitly when defining props, for example:
Moving on to automatic batching, React 18 introduced an improved version of batching called Automatic Batching.
He then covered strict mode changes in React. Before this change, React would mount the component and create the effects, as shown:
He then covered concurrency, as React 18 was developed with concurrent rendering in mind.
The meaning of concurrent is that the UI can respond to user input even if they are in the middle of a task. It is about responding to user input, even if it’s while in the middle of rendering large tasks – this creates a fluid user experience.
New Hooks AP are also covered. Some of the new APIs in React 18 include:
- startTransition()
- useDeferredValue()
- useId()
- useSyncExternalStore
- useInsertionEffect()
Non then closed the presentation by covering suspense and React DOM server updates. Suspense one of the new features in React 18 which allows components to “wait” for something before it renders while code splitting will now work on the server side rendering.
Introducing Vite
The second speaker, Kornkanok Liengsaengthong continued by showing us the next generation tools for frontend development.
She knows well that using web bundlers sometimes can be complicated. So, in the session, she discussed an alternative tool designed to simplify, build, and accelerate the development process in order to improve workflow, known as Vite.
Vite is a build tool for front end development, with common uses for speeding up development.
It improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code.
Vite is a tool that leverages two improvements made recently in the Javascript ecosystem to offer a better development: the availability of ES Modules in the browser and compile-to-native bundler tools like esbuild.
The availability of ES modules in the browser allows you to run Javascript applications on the browser without having to bundle them all together.
Vite Features:
- Importing .ts files out of the box.
- Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is handled by your IDE.
- Vite uses esbuild to transpile Typescript into Javascript which is about 20-30x faster than vanilla tsc, and HMR updates can reflect in the browser under 50ms.
Building A Component Library
Our final speaker, Georgii Shestakov, finished the meetup by discussing the importance of building a component library.
If you work in a company with multiple projects, you may find yourself repeatedly employing the same component.
In this case, creating a component library may be the finest investment you can make, and Georgii Shestakov, our experienced manager and developer, tells us what technology to use and what challenges to face during that.
Georgii has over 15 years of experience in software development, both backend and frontend, for web applications.
His projects frequently incorporate test-driven development and agile techniques. Moreover, he is enthusiastic about data science and machine learning.
He suggested utilizing tools such as Emotion, Typescript, Babel, Rollup.js and Storybook to create a component library. Georgii covered the said tools individually, as well as its features & benefits.
He then covered the reasons why you need to build ESM together with CommonJS.
After that section, he cautioned on what you add into “dependencies” and suggested not to add heavy third party libraries as dependencies.
He then continued with some good practices on reusing components. In terms of this, he recommended:
- Exposing correct properties to provide flexibility to people using your component.
- Don’t add to the library component with too many narrow use cases.
- Provide documentation for each reusable component.
- Start with the smallest components (atoms).
- Use the minimum required React version.
Finally, Georgii closed this talk with the importance of quality assurance for components in a library before adding them into a project as well as automation for component creation. You can hear this information right away in our full video below.
If you would like to learn more about deploying React based applications, feel free to take a look at this article here.