Tháng 8 2024 - Phá Kén

18 min
2 năm ago
2

Chào mọi người! Dưới đây là thông tin mình thu thập có được tổng hợp từ 1 anh techlead. Và đây là những nhận định, lời khuyên mà anh ấy muốn truyền đạt. Không dài dòng nữa, chúng ta hãy bắt đầu […]

Hiểu về optimistic UI và React useOptimistic Hook

Lập Trình

Lập Trình Mobile

React Native

17 min
2 năm ago
2

Tagged #React, #ReactNative

Milliseconds có thể tạo nên hoặc phá hỏng trải nghiệm người dùng, vì sự chậm trễ có thể khiến họ rời khỏi trang web của chúng ta. Một chiến lược đang được chú ý nhờ khả năng mang lại các tương tác nhanh chóng và nhạy bén là mẫu giao diện lạc quan (Optimistic UI pattern). Mẫu này cho phép chúng ta cập nhật giao diện người dùng ngay lập tức sau khi người dùng hoàn thành một hành động, dựa trên giả định rằng các hoạt động nền sẽ thành công. Phương pháp này làm tăng cảm giác về tốc độ của ứng dụng và cải thiện đáng kể trải nghiệm người dùng bằng cách cung cấp phản hồi ngay tức thì.

Hiểu về Optimistic UI và Hook useOptimistic của React
Trong bài viết này, chúng ta sẽ khám phá Hook mới của React là useOptimistic và cách nó có thể giúp chúng ta triển khai các cập nhật giao diện lạc quan để làm cho ứng dụng của chúng ta cảm giác nhanh hơn và nhạy bén hơn.

React useOptimistic Hook là gì?
Hook useOptimistic là một tính năng mạnh mẽ hiện có sẵn trong phiên bản Canary của React. Nó cho phép chúng ta hiển thị một trạng thái khác trong khi một hành động bất đồng bộ, chẳng hạn như yêu cầu mạng, đang diễn ra. Điều này đặc biệt quan trọng trong những trường hợp người dùng mong đợi phản hồi tức thì cho các hành động của họ, chẳng hạn như khi gửi biểu mẫu hoặc bình luận trên mạng xã hội.

Bằng cách triển khai Hook useOptimistic, các ứng dụng có thể cập nhật giao diện người dùng ngay lập tức, mang lại trải nghiệm người dùng liền mạch và hấp dẫn. Hãy cùng tìm hiểu với một ví dụ:

const [optimisticComments, postComment] = useOptimistic(commentsFromServer, addComment);

optimisticComments: Đây là trạng thái Optimistic, được khởi tạo với giá trị từ commentsFromServer. Nó hiển thị danh sách các bình luận hiện có trên một bài đăng, phản ánh ngay lập tức mọi hành động của người dùng.
postComment: Đây là hàm dispatch mà chúng ta gọi để áp dụng mutation được định nghĩa trong addComment. Hàm này cập nhật optimisticComments một cách Optimistic khi người dùng thêm một bình luận.
commentsFromServer: Đây là nguồn dữ liệu chính, đại diện cho danh sách các bình luận đã được xác nhận lấy từ server. Nếu giá trị này thay đổi (ví dụ, sau khi lấy dữ liệu mới từ server), optimisticComments cũng sẽ cập nhật để đảm bảo tính nhất quán.
addComment: Đây là logic mutation sẽ được áp dụng cho optimisticComments khi postComment được gọi. Nó xác định cách thêm một bình luận mới vào danh sách một cách Optimistic.

Xét về hiệu quả của nhà phát triển, React đã giới thiệu Hook useOptimistic được tùy chỉnh cho mẫu giao diện này. Việc cập nhật giao diện lạc quan đảm bảo rằng người dùng không phải chờ đợi phản hồi từ server, điều này là rất quan trọng để duy trì trải nghiệm người dùng mượt mà. Khi người dùng thực hiện một hành động, useOptimistic phản ánh ngay lập tức các thay đổi trạng thái trước khi server phản hồi.

Hook này quản lý trạng Optimistic bằng cách ban đầu giả định rằng API sẽ phản hồi thành công. Nếu API phản hồi thành công, trạng thái giả định sẽ được duy trì. Trong trường hợp API thất bại, trạng thái sẽ trở lại trạng thái ban đầu. Sự cân bằng này là rất quan trọng để duy trì tính toàn vẹn của dữ liệu trong khi cung cấp trải nghiệm người dùng nhanh chóng và nhạy bén.

Bằng cách sử dụng Hook useOptimistic, các nhà phát triển có thể tạo ra những ứng dụng cảm giác tức thì và hấp dẫn hơn, giữ cho người dùng luôn tham gia và hài lòng với hiệu suất.

Một ví dụ đơn giản: Bình luận trên một bài đăng
Hãy tưởng tượng một nền tảng mạng xã hội nơi người dùng có thể xem các bài đăng của người khác. Khi người dùng nhấn nút Gửi, ứng dụng sẽ đợi phản hồi từ server trước khi cập nhật giao diện người dùng. Sự chậm trễ này có thể làm cho ứng dụng cảm giác chậm chạp.

Giả sử chúng ta đã có một server được thiết lập với các tệp cần thiết, hãy tiến hành triển khai chức năng Optimistic:

import { useState } from 'react';
import { useOptimistic } from 'react';
function CommentButton({ postId }) {
const [comments, setComments] = useOptimistic([]);
const [newComment, setNewComment] = useState('');
const [error, setError] = useState('');
const handleCommentSubmit = async () => {
setError(''); // Xóa mọi lỗi trước đó
const optimisticNewComment = { id: Date.now(), text: newComment, status: 'sending' };
setComments([...comments, optimisticNewComment]);  // Cập nhật danh sách bình luận một cách Optimistic
try {
const response = await api.postComment(postId, newComment);
const updatedComments = comments.map(comment =>
comment.id === optimisticNewComment.id ? { ...comment, status: 'sent' } : comment
);
setComments(updatedComments); // Cập nhật trạng thái bình luận thành 'sent'
} catch (error) {
const filteredComments = comments.filter(comment => comment.id !== optimisticNewComment.id);
setComments(filteredComments);
setError('Không thể đăng bình luận. Vui lòng thử lại.');
}
};
return (
<div>
<input 
type="text"
value={newComment}
onChange={(e) => setNewComment(e.target.value)}
placeholder="Viết bình luận..."
/>
<button onClick={handleCommentSubmit} disabled={!newComment.trim()}>
Đăng bình luận
</button>
{comments.map(comment => (
<div key={comment.id}>
{comment.text} {comment.status === 'sending' && <span>(Đang gửi...)</span>}
</div>
))}
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}
export default CommentButton;

Trong đoạn mã này, chúng ta đang khởi tạo Optimistic. Biến trạng thái optimisticComments chứa danh sách các bình luận, bao gồm mọi cập nhật Optimistic (các bình luận xuất hiện ngay lập tức khi người dùng thêm chúng, trước khi được xác nhận từ server). Nó bắt đầu dưới dạng một mảng trống [].

postComment là một hàm mà chúng ta sử dụng để cập nhật optimisticComments một cách Optimistic. Nó nhận một bình luận mới và thêm nó vào danh sách các bình luận hiện có. Hàm mutation (comments, newComment) => [...comments, newComment] xác định cách cập nhật danh sách bình luận khi thêm một bình luận mới. Nó tạo ra một mảng mới chứa tất cả các bình luận hiện có và bình luận mới.

Để gửi một bình luận một cách Optimistic, trước tiên chúng ta sẽ tạo một bình luận Optimistic. optimisticNewComment là một đối tượng bình luận mới với một ID tạm thời, văn bản từ trường nhập liệu, và trạng thái là sending. Đối tượng này đại diện cho bình luận mà người dùng vừa thêm.

Sau đó, để đạt được cập nhật Optimistic, chúng ta sẽ sử dụng postComment(optimisticNewComment), hành động này sẽ cập nhật danh sách optimisticComments để bao gồm bình luận mới ngay lập tức. Điều này mang lại cho người dùng phản hồi tức thì rằng bình luận của họ đã được thêm.

Sau đó, khối try sẽ cố gắng gửi bình luận mới đến server bằng cách sử dụng api.postComment(postId, newComment). Nếu server xác nhận bình luận đã được thêm, trạng thái của optimisticNewComment sẽ được cập nhật thành sent. Danh sách bình luận sẽ được cập nhật để phản ánh trạng thái mới này. Nếu cuộc gọi đến server thất bại, khối catch sẽ xóa bình luận Optimistic khỏi optimisticComments và đặt một thông báo lỗi để thông báo cho người dùng rằng bình luận không thể được đăng.

Khi chúng ta chạy ứng dụng và nhấn nút Đăng bình luận, nó sẽ trông như thế này:

Lưu ý cách nó hiển thị “Đang gửi” cùng với bình luận — đó chính là điều mà Hook useOptimistic làm. Nó đăng bình luận trong khi vẫn đang chờ yêu cầu mạng hoàn tất.

Optimistic UI vs. Các phương pháp truyền thống
Bằng cách triển khai mẫu giao diện Optimistic, các ứng dụng có thể giả lập phản hồi tức thì bằng cách cập nhật giao diện người dùng ngay khi người dùng tương tác, điều này đặc biệt quan trọng trong các môi trường tương tác liền mạch như mạng xã hội.

Các cập nhật giao diện truyền thống dựa vào thời gian phản hồi từ server, khiến người dùng phải chờ đợi lâu và làm cho ứng dụng cảm giác chậm chạp. Giao diện Optimistic biến đổi trải nghiệm này bằng cách cập nhật giao diện trước khi server phản hồi, hiển thị ngay kết quả mong đợi của hành động người dùng — như việc nhìn thấy một bình luận xuất hiện ngay khi nhấn.

ấn “Đăng bình luận”. Điều này làm cho ứng dụng cảm giác nhanh hơn nhiều.

Tóm lại, mẫu giao diện Optimistic giúp cải thiện trải nghiệm người dùng bằng cách giảm thiểu sự chậm trễ và mang lại cảm giác tức thì. Bằng cách sử dụng Hook useOptimistic của React, chúng ta có thể dễ dàng triển khai chiến lược này, mang lại trải nghiệm người dùng mượt mà hơn và tăng cường sự tương tác với người dùng.

Chúng ta đã đi qua các khái niệm và lợi ích của Optimistic UI và React Hook useOptimistic. Khi triển khai các kỹ thuật này, bạn có thể tạo ra các ứng dụng cảm giác nhanh hơn và nhạy bén hơn. Những ứng dụng này không chỉ cung cấp phản hồi tức thì cho người dùng mà còn giúp nâng cao trải nghiệm tổng thể của họ.

Hãy cân nhắc sử dụng useOptimistic trong dự án React tiếp theo của bạn để tận dụng mẫu giao diện Optimistic và mang lại trải nghiệm tốt nhất cho người dùng!

Làm thế nào để thêm màn hình Splash Screen và biểu tượng ứng dụng App Icon trong React Native?

Lập Trình

Lập Trình Mobile

React Native

13 min
2 năm ago
2

Tagged #ReactNative

Quá trình tạo ứng dụng yêu cầu chúng ta phải cân nhắc nhiều nhiệm vụ khác nhau. Chúng ta cần tạo ra một codebase và thêm các hình ảnh để ứng dụng có giao diện đặc trưng. Như đã nói, quá trình xây dựng ứng dụng cần các tệp tin hình ảnh png được lưu trữ trong thư mục gốc của ứng dụng, chúng ta không thể bỏ qua nội dung của icon ứng dụng và màn hình splash.

Với các dịch vụ phát triển ứng dụng React Native, chúng ta có thể áp dụng một kỹ thuật đơn giản để thêm hai tài nguyên này vào ứng dụng. Hãy cùng tìm hiểu cách thực hiện.

Trước khi đi vào phần chính của bài viết, hãy cùng thảo luận một số lý thuyết liên quan đến chủ đề này.

Màn hình splash là gì?
Màn hình splash là màn hình mở đầu của ứng dụng. Nó hiển thị trong một khoảng thời gian ngắn trước khi người dùng truy cập vào nội dung chính của ứng dụng. Màn hình splash hoàn toàn khác với biểu tượng ứng dụng. Khi tạo màn hình splash, chúng ta cần nhớ rằng nó sẽ hiển thị trên toàn bộ màn hình của ứng dụng.

Biểu tượng ứng dụng là gì?
Chúng ta có thể đã thấy một logo mỗi khi muốn mở một ứng dụng nào đó. Logo này chính là biểu tượng ứng dụng mà chúng ta sẽ tạo trong bài viết này. Với biểu tượng này, chúng ta có thể nhận diện ứng dụng mà mình muốn sử dụng.

Các điều kiện tiên quyết
Có hai điều kiện tiên quyết cần được xem xét. Điều đầu tiên là thiết lập môi trường React Native. Điều thứ hai là quy trình tạo một ứng dụng cơ bản bằng React Native. Chúng ta không thể tiến xa hơn với dự án hiện tại nếu chưa đáp ứng các điều kiện này.

Để sử dụng framework React Native trong quá trình phát triển ứng dụng, chúng ta cần một số phần mềm như Node.js, Android Studio, VS Code Editor, và các phần mềm khác. Nếu có bất kỳ nghi ngờ nào liên quan đến quá trình thiết lập, hãy tham khảo bài viết này.

Đối với bất kỳ thắc mắc nào về quy trình xây dựng ứng dụng, chúng ta có thể ghé thăm blog hướng dẫn để có cái nhìn toàn diện. Từ blog này, chúng ta cũng sẽ học cách điều hướng qua trình chỉnh sửa mã VS Code và thêm các thành phần vào codebase của mình.

Plugin React Native bên thứ ba: react-native-splash-screen
Ở đây, chúng ta sẽ xem xét các bước cài đặt plugin bên thứ ba cần thiết.

Bằng cách import splashScreen từ thư viện này, chúng ta có thể ẩn màn hình chào mừng sau một khoảng thời gian nhất định.

Bây giờ, để có được gói này, chúng ta cần chạy một lệnh trên Command Prompt. Lưu ý, chúng ta cần mở Command Prompt từ thư mục của ứng dụng. Lệnh này như sau:

npm i react-native-splash-screen –save

Các tiêu chí bổ sung cần đáp ứng
Trong phần này, chúng ta sẽ tìm hiểu một số bước bổ sung cần thực hiện trước khi tạo codebase. Đây là phần cụ thể cho việc cài đặt plugin.

Lưu ý rằng, có hai cách để cài đặt plugin này. Chúng ta có thể chọn cài đặt tự động hoặc cài đặt thủ công. Chúng ta nên chọn cài đặt thủ công.

Để thực hiện điều này, làm theo các bước như sau. Trước tiên, mở trình chỉnh sửa mã từ ứng dụng của chúng ta.

Mở android và sau đó gradle. Tại đây, chúng ta cần thêm dòng sau:

include ‘:react-native-splash-screen’
project(‘:react-native-splash-screen’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-splash-screen/android’)

Bây giờ, mở android, sau đó app, và sau đó gradle. Tại đây, chúng ta sẽ tìm thấy một phần về dependencies. Trong phần này, thêm:

implementation project(‘:react-native-splash-screen’)

Mở android, sau đó app, sau đó src, sau đó main, sau đó java\com\awesomeproject, và sau đó file java để thêm:

import org.devio.rn.splashscreen.SplashScreenReactPackage;

Mở android, sau đó app, sau đó src, sau đó main, sau đó java\com\awesomeproject, và cuối cùng là file MainActivity.java để thêm:

import android.os.Bundle; // đây
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // đây
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);  // đây
super.onCreate(savedInstanceState);
}

Tham khảo hình 1 để có cái nhìn về cách các lệnh được thêm vào thư mục gốc của ứng dụng.

Tạo thư mục layout
Bây giờ, tạo một thư mục layout dưới ./main./res. Cũng tạo một file tên là launchscreen.xml trong thư mục layout. Có thể bỏ qua bước này nếu chúng ta đã có hai thư mục này trong thư mục gốc của dự án.

Mở android, sau đó app, sau đó src, sau đó main, sau đó res, sau đó layout, và cuối cùng là xml từ trình chỉnh sửa mã VS Code. Thêm:

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<ImageView android:layout_width=”match_parent” android:layout_height=”match_parent” android:src=”@drawable/launch_screen” android:scaleType=”centerCrop” />
</RelativeLayout>

Thêm màn hình splash và icon ứng dụng
Chúng ta cần tải một hình ảnh định dạng png. Dù hình ảnh cho icon ứng dụng sẽ có kích thước cụ thể, hình ảnh cho màn hình splash sẽ không yêu cầu kích thước cụ thể. Sau khi có được hình ảnh, tạo một thư mục drawable trong thư mục res của ứng dụng. Dán hình ảnh vào thư mục drawable và đặt tên là launch_screen. Sau đó, chúng ta cần lưu toàn bộ quá trình này.

Bây giờ, chúng ta sẽ tiến hành các bước thêm icon hình ảnh vào ứng dụng.

Ở đây, cần cân nhắc kích thước của hình ảnh. Chọn một hình ảnh từ trình duyệt web. Tải hình ảnh này với năm kích thước khác nhau và lưu trữ chúng trong năm file khác nhau. Khi mở thư mục res, chúng ta sẽ thấy năm file riêng biệt với tên là mipmap-hdpi, mipmap-mdpi, mipmap-xxxhdpi, mipmap-xxhdpi, và mipmap-xhdpi. Đã có một số hình ảnh mặc định trong năm thư mục này. Tất cả những gì chúng ta cần làm là thay thế các hình ảnh này bằng hình ảnh đã tải về.

Hãy cùng xác định kích thước của các hình ảnh. Với mipmap-hdpi, kích thước là 7272, với mipmap-xxxhdpi, kích thước là 192192, với mipmap-xxhdpi, kích thước là 144144, với mipmap-xhdpi, kích thước là 9696 và cuối cùng, với mipmap-mdpi, kích thước là 48*48.

Vậy là chúng ta đã tùy chỉnh thành công icon hình ảnh và màn hình splash. Bây giờ, chúng ta cần cấu trúc thư mục app.js.

Cấu trúc thư mục App.js
Phần này sẽ là một đoạn mã nhỏ. Chúng ta chỉ cần import các components và wrap SplashScreen với useEffect.

Hãy cùng xem cách thực hiện.

import { StyleSheet, Text, View } from ‘react-native’
import SplashScreen from ‘react-native-splash-screen’;
import React,{useEffect} from ‘react’

Ngoài các components cốt lõi, chúng ta cần import component quan trọng SplashScreen từ thư viện bên thứ ba RN: react-native-splash-screen.

Bây giờ, chúng ta sẽ gọi SplashScreen để ẩn màn hình chào mừng. Xem cú pháp sau:

useEffect(()=>{
SplashScreen.hide();
},2000)

Theo cú pháp này, màn hình chào mừng sẽ hiển thị trong 2 giây.

const App = () => {
return (
<View>
<Text>App</Text>
</View>
)
}

Đây là codebase chung mà chúng ta sẽ thấy trong mọi thư mục App.js. Mục đích của cú pháp này là để hiển thị dòng chữ “App”.

Khi đã cấu trúc xong thư mục app.js, chúng ta sẽ tiến hành chạy ứng dụng trên trình giả lập.

Chạy ứng dụng trên trình giả lập
Mở terminal từ ứng dụng. Chạy npm install và sau đó npx react-native run-android. Quá trình bundle của ứng dụng có thể mất chút thời gian. Ngay khi quá trình bundle hoàn thành,

màn hình như trong hình 2 sẽ xuất hiện trên trình giả lập. Cũng tham khảo hình 3 cho icon ứng dụng.

Sự khác biệt giữa hook useMemo và useCallback là gì?

Lập Trình

Lập Trình Mobile

React Native

23 min
2 năm ago
3

React cung cấp nhiều hook giúp quản lý trạng thái ứng dụng và các tính năng React khác trong các thành phần chức năng dễ dàng hơn. Hook cung cấp các tính năng thành phần lớp cho các thành phần chức năng […]

Tagged #ReactNative

Hooks cũng giúp cuộc sống của bạn dễ dàng hơn bằng cách cung cấp một số tính năng tiện lợi. Trong số các hooks này, chúng ta có useMemovà useCallbackgiúp cải thiện hiệu suất trang web của bạn.

Trong hướng dẫn hôm nay, chúng ta sẽ thảo luận về cả hooks useMemovà useCallbackhooks. Bạn sẽ học được sự khác biệt giữa chúng và thời điểm sử dụng từng hooks.

`useMemo`Hook

Hook ghi nhớuseMemo giá trị trả về của phép tính tốn kém giữa các lần kết xuất. Ghi nhớ có nghĩa là lưu trữ giá trị dưới dạng giá trị được lưu trong bộ nhớ đệm để giá trị không cần phải được tính toán lại (trừ khi cần thiết).

useMemolà một hook được sử dụng để tối ưu hóa hiệu suất render của bạn. Thông thường, khi bạn khai báo một biến bên trong một thành phần, nó sẽ được tạo lại trên mỗi lần render. Nếu nó lưu trữ giá trị trả về của một hàm, thì hàm đó sẽ được gọi mỗi lần render component của bạn.

Thông thường, điều này không phải là vấn đề. Nhưng, nếu hàm này tốn kém thì sao? Nếu mất nhiều thời gian hơn để thực thi thì sao? Hãy xem ví dụ sau:

function calculate() { let result = 0; for (let i = 0; i < 1000000000; i++) { result += i; } return result; } function App1() { const [count, setCount] = useState(0); const value = calculate(); return ( <div className="App"> <button onClick={() => setCount(count + 1)}>Increment Count</button> <p>Count: {count}</p> </div> ); }

Khi bạn nhấp vào ‘count’, phải mất vài giây để cập nhật trạng thái số lượng. Điều này là do hàm calculate run mỗi lần một thành phần được render lại sau khi thay đổi trạng thái.

Bây giờ, hãy tưởng tượng nếu có nhiều biến trạng thái trong thành phần, mỗi biến có mục đích riêng. Mỗi lần cập nhật trạng thái sẽ gây ra việc kết xuất lại và thực hiện hàm tốn kém này.

Các biến trạng thái này có thể hoàn toàn không liên quan đến phép tính tốn kém được thực hiện, điều này sẽ gây ra sự chậm trễ không cần thiết. Điều này sẽ ảnh hưởng đến hiệu suất của trang web của bạn và có thể dẫn đến trải nghiệm người dùng tồi tệ.

useMemocó thể giúp bạn giải quyết vấn đề này. Trước tiên chúng ta hãy hiểu cú pháp của nó:

const value = useMemo(expensiveFunction, [...dependencyArray])

Hook useMemophải được khai báo ở cấp cao nhất của thành phần của bạn. Nó lấy các đối số sau:

expensiveFunctionchứa phép tính tốn kém mà bạn muốn thực hiện. Nếu bạn đã khai báo hàm bên ngoài, chỉ truyền tham chiếu hàm, không có dấu ngoặc. Bạn cũng có thể truyền trực tiếp các hàm mũi tên.
dependencyArraychứa danh sách các phụ thuộc cho hook. Hàm tốn kém sẽ chỉ được gọi khi một trong các phụ thuộc này được cập nhật. Bạn có thể truyền các biến trạng thái hoặc prop phụ thuộc vào phép tính này. Bất kỳ cập nhật trạng thái nào khác sẽ không kích hoạt hàm.

Trong lần render đầu tiên, useMemotrả về kết quả expensiveFunctionvà lưu trữ kết quả. Trong các lần render tiếp theo, nó sẽ trả về giá trị được lưu trữ nếu không có sự phụ thuộc nào thay đổi. Nếu chúng thay đổi, thì nó sẽ gọi lại hàm.

Chúng ta hãy sử dụng điều này trong trường hợp của chúng ta:

const [dependentCount, setDependentCount] = useState(10); const value = useMemo(calculate, [dependentCount]); return ( <div className="App"> // ... <button onClick={() => setDependentCount(dependentCount + 1)}> Increment Dependent Count </button> <p>Dependent Count: {dependentCount}</p> </div> );

Chúng ta đã tạo một trạng thái khác dependentCountmà chúng ta cho là phụ thuộc vào phép tính tốn kém. Khi trạng thái này cập nhật và hiển thị thành phần, hàm calculatesẽ chạy.

Nhưng nếu bất kỳ trạng thái nào khác thay đổi, thì useMemosẽ trả về giá trị được lưu trong bộ nhớ đệm thay vì chạy lại hàm.

Hãy kiểm tra điều này bằng cách thêm a console.logvào bên trong hàm:

Đầu ra với useMemo

Bây giờ, khi bạn nhấp vào “Increment Count”, việc kết xuất sẽ nhanh hơn vì hàm calculatekhông được gọi trong mọi lần kết xuất. Điều này cũng giống như trong mọi lần cập nhật trạng thái khác không được liệt kê trong mảng phụ thuộc useMemo.

Nhưng khi bạn nhấp vào “Increment dependent Count”, phải mất thời gian để hiển thị giá trị đã cập nhật. Điều này là do dependentCountnó là một phụ thuộc của useMemovà việc thay đổi nó sẽ gọi hàm tốn kém, do đó thành phần mất thời gian để hiển thị lại.

Theo cách này, với useMemo, bạn có thể kiểm soát việc thực thi một hàm tốn kém bằng cách chỉ gọi nó cho các bản cập nhật trạng thái thực sự cần giá trị được trả về. Điều này có thể cải thiện đáng kể hiệu suất ứng dụng của bạn.

Khi nào nên sử dụng `useMemo`:

Khi bạn có trạng thái phụ thuộc vào phép tính tốn kém nhưng không muốn chạy phép tính đó trên mọi lần kết xuất.
Khi bạn khai báo một mảng hoặc đối tượng bên trong một thành phần, tham chiếu của nó thay đổi trên mỗi lần kết xuất, mặc dù giá trị vẫn giữ nguyên. Việc bao bọc các giá trị bên trong useMemoduy trì tính bình đẳng tham chiếu và ngăn chặn việc kết xuất lại không cần thiết. Điều này rất cần thiết khi có useEffectsự phụ thuộc vào mảng hoặc đối tượng.
Khi bạn đang kết xuất danh sách, Array.mapkhông cần phải thay đổi trừ khi giá trị trạng thái nào đó thay đổi.

Cái `useCallbac`kHook

Tương tự như useMemo, bạn cũng có thể sử dụng hook này để tối ưu hóa hiệu suất. useCallbackHook ghi nhớ một hàm gọi lại và trả về hàm đó.

Lưu ý rằng useCallbackhook sẽ ghi nhớ chính hàm đó, chứ không phải giá trị trả về của nó. useMemoLưu trữ đệm giá trị trả về của hàm để hàm không cần phải thực thi lại. useCallbackLưu trữ đệm định nghĩa hàm hoặc tham chiếu hàm.

Một hàm được khai báo bên trong một thành phần được tạo lại trên mỗi lần render thành phần, tương tự như một biến. Sự khác biệt là, nó được render với một tham chiếu khác nhau mỗi lần. Vì vậy, một thành useEffectphần phụ thuộc vào hàm này sẽ thực thi lại trên mỗi lần render. Một điều tương tự xảy ra với các thành phần con.

Chúng ta hãy lấy một ví dụ:

const App = () => { const [count, setCount] = useState(0); const [value, setValue] = useState(""); const handleClick = () => { setValue("Kunal"); }; return ( <div className="App"> <button onClick={() => setCount(count + 1)}>Increment Count</button> <p>Count: {count}</p> <p>Value: {value}</p> <SlowComponent handleClick={handleClick} /> </div> ); }; const SlowComponent = React.memo(({ handleClick, value }) => { // Intentially making the component slow for (let i = 0; i < 1000000000; i++) {} return ( <div> <h1>Slow Component</h1> <button onClick={handleClick}>Click Me</button> </div> ); });

Ở đây, chúng ta có a SlowComponentlà thành phần con của Appthành phần. Khi một thành phần cha được render, tất cả các thành phần con của nó đều được render, bất kể có bất kỳ thay đổi nào bên trong chúng hay không.

Để tránh việc render không cần thiết các thành phần con, chúng ta thường sử dụng hàm React.memo. Về cơ bản, hàm này sẽ lưu trữ bộ nhớ đệm thành phần và chỉ render lại nếu props của thành phần đó đã thay đổi.

Bây giờ, khi bạn nhấp vào ‘Increment Count’, vẫn mất nhiều thời gian để render, vì SlowComponentrender lại khi trạng thái thay đổi. Nhưng tại sao vậy? Chúng ta không thay đổi bất kỳ prop nào của nó.

Trên bề mặt, chúng ta có thể không thay đổi giá trị của handleClickprop. Nhưng vì các hàm được tạo lại với một tham chiếu khác, nên trên mỗi lần render của thành phần App, thành phần con của nó (tức là SlowComponent) sẽ render.

Để duy trì tính bình đẳng tham chiếu, chúng ta gói định nghĩa hàm này bên trong a useCallback.

Chúng ta hãy cùng tìm hiểu cú pháp của nó:

const cachedFn = useCallback(fn, [...dependencyArray])

useCallbackcó các lập luận sau:

fnlà hàm bạn muốn lưu vào bộ nhớ đệm. Đây là định nghĩa hàm bạn muốn tạo và có thể lấy bất kỳ đối số nào và trả về bất kỳ giá trị nào.
dependencyArraylà danh sách các phụ thuộc, các thay đổi kích hoạt việc tạo lại hàm. Bạn có thể truyền các giá trị trạng thái hoặc prop phụ thuộc vào hàm này.

Trong lần render đầu tiên, React tạo hàm (không gọi hàm) và lưu vào bộ nhớ đệm. Trong các lần render tiếp theo, hàm được lưu vào bộ nhớ đệm sẽ được trả về cho bạn. Hãy nhớ rằng, hook này trả về và lưu vào bộ nhớ đệm hàm chứ không phải giá trị trả về của hàm.

Chúng ta hãy sử dụng hook này trong ví dụ của chúng ta:

import { useCallback } from "react"; const App = () => { // ... const handleClick = useCallback(() => { setValue("Kunal"); }, [value, setValue]); // ... };

Ở đây, chúng ta đã gói hàm bên trong a useCallbackvà truyền hai phụ thuộc liên quan đến hàm này.

Bây giờ, khi bạn nhấp vào ‘Increment Count’, việc kết xuất sẽ nhanh hơn nhiều. Điều này là do tham handleClickchiếu được lưu trong bộ nhớ đệm giữa các lần kết xuất và do đó, SlowComponentkhông kết xuất lại.

Nhưng khi bạn nhấp vào nút bên trong, SlowComponentnó sẽ render lại. Điều này là do khi valuetrạng thái thay đổi, handleClickphương thức được tạo lại và do đó các props của thành phần chậm đã thay đổi.

Giá trị cần thời gian để hiển thị

Bạn có thể thêm nhiều trạng thái hơn vào Appthành phần và cập nhật chúng mà không làm giảm hiệu suất miễn là bạn không cập nhật valuetrạng thái của.

Khi nào sử dụng`useCallback`

Khi bạn đã xác định trình xử lý sự kiện cho một phần tử bên trong thành phần của mình, hãy gói chúng bên trong a useCallbackđể tránh việc tạo lại trình xử lý sự kiện không cần thiết.
Khi bạn gọi một hàm bên trong a useEffect, bạn thường truyền hàm đó dưới dạng một dependency. Để tránh sử dụng useEffectkhông cần thiết trên mỗi lần render, hãy gói định nghĩa hàm bên trong a useCallback.
Nếu bạn đang viết một hook tùy chỉnh và nó trả về một hàm, bạn nên gói nó bên trong useCallback. Vì vậy, người dùng không cần phải lo lắng về việc tối ưu hóa hook – thay vào đó, họ có thể tập trung vào mã của riêng họ.

Sự khác biệt giữa `useMemo`và`useCallback`

Chúng ta hãy tóm tắt sự khác biệt giữa hai loại hook này:

useMemolưu trữ đệm giá trị trả về của một hàm. useCallbacklưu trữ đệm định nghĩa của chính hàm đó.
useMemođược sử dụng khi bạn có một phép tính tốn kém mà bạn muốn tránh trong mỗi lần kết xuất.
useCallbackđược sử dụng để lưu trữ đệm một hàm nhằm tránh phải tạo lại hàm đó sau mỗi lần kết xuất lại.
useMemođảm bảo rằng một hàm đắt tiền chỉ được gọi cho các giá trị trạng thái phụ thuộc vào nó.
useCallbacktạo ra các hàm ổn định duy trì cùng một tham chiếu giữa các lần kết xuất. Điều này tránh việc kết xuất không cần thiết các thành phần con.

Và đây là một vài điều nữa cần nhớ. Chỉ sử dụng các hook này nếu bạn muốn ghi nhớ các phép tính tốn kém hoặc ngăn chặn việc kết xuất lại không cần thiết. Không sử dụng useMemovà useCallbackở mọi nơi.

Đối với các hàm thông thường, các hook này không tạo ra nhiều khác biệt. Việc sử dụng quá nhiều sẽ khiến mã của bạn không thể đọc được. Thay vào đó, bạn có thể tìm ra những cách khác để cải thiện hiệu suất ứng dụng.

Phần kết luận

useMemovà useCallbacklà những hook hữu ích trong React có thể giúp bạn tối ưu hóa hiệu suất của ứng dụng web. Điều quan trọng là phải hiểu sự khác biệt giữa hai cái này và cách sử dụng của chúng.

Trong bài viết này, chúng ta đã thảo luận về cách thức hoạt động của cả hai hook. useMemolưu trữ kết quả của một phép tính tốn kém, trong khi useCallbacklưu trữ tham chiếu hàm. Chúng ta cũng đã liệt kê các tình huống khi bạn nên sử dụng từng hook. Cả hai hook này cùng nhau có thể giúp trang web của bạn nhanh hơn.

Mình hy vọng bài viết này giúp làm sáng tỏ mọi sự nhầm lẫn. Nếu bạn có thêm câu hỏi hoặc bình luận về bài đăng, hãy liên hệ với mình. Mình rất muốn nghe các đề xuất. Hẹn gặp lại lần sau, tạm biệt!