React 18 introduces new features such as automatic batching, transitions, suspense on the server, and concurrent rendering for improved performance and user experience. Key updates include new hooks like useId and useTransition, as well as changes in rendering techniques both client-side and server-side. Released in March 2022, React 18 aims to enhance the efficiency and responsiveness of applications.

1. React 18 New Features And Updates

3. How many ways are there to define
variables in ES6?
• 1
• 2
• 3
• 4

4. How many ways are there to define
variables in ES6?
• 1
• 2
• 3
• 4

5. How many ways are there to define
variables in ES6?
• 3 : Var, Let, Const.

6. React 18 - New Features
Concurrent Features
Transitions
Suspense on the server

7. React 18 - Improvement
Automatic Batching
Better Rendering
Performance

8. React 18
• React was Released in March 2022
• Install it with the help of npm or yarn

9. What’s new in React 18?
1. Automatic Batching
2. Transitions
3. Suspense on the Server
4. Concurrent React

10. Automatic Batching
All state modifications made using event handlers
are grouped together using React's built-in batching functionality
1. Automatic Batching
2. Transitions
3. Suspense on the Server
4. Concurrent React

11. Transition
A transition is a new concept in React to distinguish between urgent and non-urgent
updates
• Urgent updates
• Transition updates
1. Automatic Batching
2. Transitions
3. Suspense on the Server
4. Concurrent React

12. Suspense on the server
The react suspense is quite helpful since it provides a calm loading
state while the user is dealing with a network conflict
1. Automatic Batching
2. Transitions
3. Suspense on the Server
4. Concurrent React

13. Concurrent React
React can interrupt, pause, restart, or quit a render in React 18 with concurrent
rendering. This enables React to react rapidly to user input even while it is
engaged in a time-consuming rendering operation.
1. Automatic Batching
2. Transitions
3. Suspense on the Server
4. Concurrent React

14. New Hooks
• useId
• useTransition
• useDeferredValue
• useSyncExternalStore
• useInsertionEffect

15. Strict Mood
• React 18's strict mode component will be mounted, unmounted, and
then remounted with a previous state
• Strict mode will guarantee that components are resistant to effects
being repeatedly mounted and unmounted

16. Changes Done on React JS
• Client Side
• Server Side
• Library Side

17. Client Side Changes
• render –> createRoot

18. Client Side Changes
• UnmountComponentAtNode - > root.unmount

19. Client Side Changes
• React.DOM.Hydrate - > hydrateRoot

20. Server Side Changes
• renderToPipableStream
• renderToReadableStream
• renderToString

21. Library Side Changes
• useId
• useSyncExternalStore
• useInsertionEffect