new features react 18.x vs 17 version
30 tháng 7, 2024
Loading...
Loading...
React 18 introduced several new features and improvements over React 17. Here are some of the key differences and examples of new features in React 18:
Key Features in React 18
1. Concurrent Rendering:
• React 18 introduces concurrent rendering, which allows React to prepare multiple versions of the UI at the same time.
• This improves the performance and responsiveness of the application.
2. Automatic Batching:
• Automatic batching groups multiple state updates into a single re-render for better performance.
• Previously, only updates inside React event handlers were batched.
3. Transition API:
• The startTransition API lets you mark updates as non-urgent. React will keep the interface responsive by interrupting these transitions if more urgent updates like clicks or typing come in.
4. Suspense Improvements:
• React 18 enhances Suspense for data fetching. This makes it easier to coordinate asynchronous operations in a declarative way.
5. New Hooks:
• useId: Generates unique IDs to avoid mismatches when rendering on the server and client.
• useTransition: Allows marking updates as transitions.
6. Concurrent Features:
• createRoot: A new root API for creating concurrent roots.
• useDeferredValue: Allows you to defer re-rendering a non-urgent part of the UI.
Example Code Differences
Concurrent Rendering
React 17:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));React 18:
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
Automatic Batching
React 17:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
setCount(count + 1);
}
return (
<div>
<button onClick={handleClick}>Increment</button>
<p>{count}</p>
</div>
);
}• In React 17, the count will be incremented by 1 because state updates are not automatically batched outside event handlers.
React 18:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
setCount(count + 1);
}
return (
<div>
<button onClick={handleClick}>Increment</button>
<p>{count}</p>
</div>
);
}• In React 18, the count will be incremented by 2 because state updates are automatically batched.
Transition API
React 18:
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [count, setCount] = useState(0);
function handleClick() {
startTransition(() => {
setCount(count + 1);
});
}
return (
<div>
<button onClick={handleClick} disabled={isPending}>
{isPending ? 'Loading...' : 'Increment'}
</button>
<p>{count}</p>
</div>
);
}useId Hook
React 18:
import React, { useId } from 'react';
function App() {
const id = useId();
return (
<div>
<label htmlFor={id}>Name</label>
<input id={id} type="text" />
</div>
);
}
These examples highlight some of the new features and improvements in React 18 compared to React 17. The new concurrent features and hooks provide more flexibility and better performance for building modern React applications.
✔ Giải mã 100 Đặc điểm của Người Thành công: Bản đồ phát triển bản thân hiệu quả
✔ Bí Kíp Kiếm Tiền Trên Facebook 2025: Hướng Dẫn Toàn Tập Tối Ưu Hóa Thu Nhập
✔ Gemini Miễn phí vs Gemini Pro (Google AI Pro): So sánh tính năng, phí và cách chọn 2025
✔ Veo 3 AI: Hướng dẫn Prompt & Chiến lược GV‑SEO 2025 cho Người Mới và Doanh Nghiệp-Phần 2
✔ Cẩm Nang Veo 3 AI 2025: Hướng Dẫn Viết Prompt Video AI Cho Marketer & Nhà Sáng Tạo
✔ Hành Trình Tự Do Tài Chính: Bí Quyết Tập Trung, Duy Trì Động Lực Và Làm Việc Hiệu Quả
✔ Các Cấp Độ Tiếng Anh và Quy Đổi Điểm TOEIC Chuẩn Xác Nhất 2025
✔ So sánh chi tiết Gemini 2.5 Pro và Gemini Flash 2.5: Hiệu năng, tính năng và ứng dụng thực tế
✔ So sánh Veo 2 và Veo 3: Hướng dẫn tạo prompt, khác biệt chi tiết và ví dụ thực tế