Share this
Top 5 New Features In React 18
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.
![Screen-Shot-2565-08-02-at-13.31.44](https://sevenpeakssoftware.com/hs-fs/hubfs/Screen-Shot-2565-08-02-at-13.31.44.png?width=654&height=331&name=Screen-Shot-2565-08-02-at-13.31.44.png)
![Screen-Shot-2565-08-02-at-13.33.44](https://sevenpeakssoftware.com/hs-fs/hubfs/Screen-Shot-2565-08-02-at-13.33.44.png?width=651&height=316&name=Screen-Shot-2565-08-02-at-13.33.44.png)
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.
Share this
- FinTech (13)
- Career (12)
- Expert Spotlight (11)
- Thought Leadership (10)
- Product Growth (9)
- Software Development (9)
- Data and Analytics (5)
- Design Thinking (5)
- InsurTech (5)
- QA (5)
- Agile (4)
- Cloud (4)
- Company (4)
- Digital Transformation (4)
- Financial Inclusion (4)
- JavaScript (4)
- Product Design (4)
- Seven Peaks Insights (4)
- Trend (4)
- UX Design (4)
- .NET (3)
- Android Developer (3)
- Android Development (3)
- Azure (3)
- Banking (3)
- CSR (3)
- DevOps (3)
- IoT (3)
- Product-Centric Mindset (3)
- Cloud Development (2)
- Customer Data Platform (2)
- Data (2)
- Digital Product (2)
- E-wallet (2)
- Expat (2)
- Hybrid App (2)
- Kotlin (2)
- Product Owner (2)
- Software Tester (2)
- SwiftUI (2)
- UI (2)
- UX (2)
- UX Writing (2)
- Visual Design (2)
- iOS Development (2)
- .NET 8 (1)
- 2023 (1)
- 4IR (1)
- 5G (1)
- AI (1)
- API (1)
- Agritech (1)
- AndroidX Biometric (1)
- App Development (1)
- Azure OpenAI Service (1)
- Backend (1)
- Brand Loyalty (1)
- CDP (1)
- CI/CD (1)
- Conversions (1)
- Cross-Platform Application (1)
- Dashboard (1)
- Digital (1)
- Digital Healthcare (1)
- Digital ID (1)
- Digital Landscape (1)
- Engineer (1)
- Expert Interview (1)
- Fiddler (1)
- Figma (1)
- Financial Times (1)
- GraphQL (1)
- Hilt (1)
- IT outsourcing (1)
- KYC (1)
- MVP (1)
- MVVM (1)
- Metaverse (1)
- Morphosis (1)
- Native App (1)
- New C# (1)
- Newsletter (1)
- Node.js (1)
- Payment (1)
- Platform Engineer (1)
- Platform Engineering Jobs (1)
- Platform Engineering Services (1)
- Project Manager (1)
- Rabbit MQ (1)
- React (1)
- ReactJS (1)
- Stripe (1)
- Super App (1)
- Turnkey (1)
- UIkit (1)
- UX Research (1)
- UX Strategy (1)
- Web 3.0 (1)
- Web-Debugging Tool (1)
- August 2024 (2)
- July 2024 (6)
- April 2024 (1)
- March 2024 (7)
- February 2024 (14)
- January 2024 (14)
- December 2023 (9)
- November 2023 (9)
- October 2023 (2)
- September 2023 (6)
- August 2023 (6)
- June 2023 (4)
- May 2023 (4)
- April 2023 (1)
- March 2023 (1)
- November 2022 (1)
- August 2022 (4)
- July 2022 (1)
- June 2022 (6)
- April 2022 (6)
- March 2022 (4)
- February 2022 (8)
- January 2022 (4)
- December 2021 (1)
- November 2021 (2)
- October 2021 (2)
- September 2021 (1)
- August 2021 (3)
- July 2021 (1)
- June 2021 (2)
- May 2021 (1)
- March 2021 (4)
- February 2021 (5)
- December 2020 (4)
- November 2020 (1)
- June 2020 (1)
- April 2020 (1)