React Hook là một tính năng được giới thiệu từ phiên bản React 16.8, giúp các lập trình viên dễ dàng quản lý trạng thái và logic của ứng dụng React. React Hook cung cấp một cách tiếp cận mới để viết các thành phần trong React, bằng cách sử dụng các hàm JavaScript đơn giản.
React Hook được thiết kế để thay thế hoàn toàn cho việc sử dụng class components trong React. Nó cho phép lập trình viên sử dụng state và lifecycle methods của React trong các function components. Nhờ đó, chúng ta có thể viết các thành phần dễ dàng hơn, không cần phải sử dụng class components, điều này giúp giảm đáng kể lượng code cần phải viết.
React Hook bao gồm các hook được xây dựng sẵn, như useState, useEffect, useContext, useReducer, useMemo, useCallback và useRef. Mỗi hook có một chức năng riêng và được sử dụng trong các trường hợp khác nhau.
Ví dụ, useState hook được sử dụng để quản lý trạng thái của một component, useEffect được sử dụng để quản lý side effect của một component, useContext được sử dụng để truy cập các giá trị context, và useRef được sử dụng để lưu trữ các tham chiếu tới các elements trong DOM.
Việc sử dụng React Hook có nhiều lợi ích như giúp code dễ đọc hơn, dễ bảo trì hơn và giúp tăng hiệu suất của ứng dụng React. Với React Hook, chúng ta có thể tạo ra các thành phần dễ dàng hơn, không cần phải sử dụng class components, điều này giúp giảm đáng kể lượng code cần phải viết.
Trên đây là một số thông tin về React Hook, tính năng được giới thiệu gần đây đã trở thành một phần quan trọng của React, được sử dụng rộng rãi trong cộng đồng React. Việc sử dụng React Hook giúp cho các lập trình viên dễ dàng hơn trong việc quản lý trạng thái và logic của ứng dụng React, đồng thời giảm thiểu việc sử dụng class components và tạo ra các thành phần dễ đọc và dễ bảo trì hơn.
Bạn có thể tham khảo thêm thông tin tại trang chủ của React
2.useEffect() là gì?
useEffect() là một hook trong React giúp thực hiện các tác vụ gắn kết (side effects) như gọi API, thay đổi DOM, tương tác với các thư viện bên ngoài, và các tác vụ khác mà ảnh hưởng đến state của ứng dụng.
Được đặt tên theo “Effect” trong React, useEffect() được sử dụng để thực hiện các tác vụ gắn kết của component React. Nó thường được sử dụng để gọi các hàm không thuộc về React nhưng cần được thực hiện khi state của component thay đổi.
3.Cú pháp và một số ví dụ về useEffect trong React
Cú pháp của useEffect() là:
useEffect(() => {
// thực hiện tác vụ gắn kết
return () => {
// thực hiện tác vụ hủy gắn kết
};
}, [dependencies]);
Trong đó, callback function đầu tiên sẽ được thực thi khi component được render. Nếu muốn hủy các tác vụ được gắn kết khi component unmount, ta có thể trả về một hàm từ callback function đó. Dependency array, nếu được cung cấp, sẽ được sử dụng để giới hạn việc gọi callback function chỉ khi các dependency được liệt kê trong array thay đổi.
Ví dụ, ta có thể sử dụng useEffect() để gọi API và lưu trữ dữ liệu vào state của component như sau:
import { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(<a href="https://nodemy.vn/thao-tac-voi-json-trong-javascript-don-gian-de-hieu-cho-nguoi-moi-bat-dau-biet-den-va-tim-hieu-json-trong-javascript-important/">json</a> => setData(json));
}, []);
return (
<div>
{data.map(item => (
<p key={item.id}>{item.title}</p>
))}
</div>
);
}
Trong ví dụ này, ta sử dụng useEffect() để gọi API và lưu trữ dữ liệu trả về vào state của component. Hàm callback trong useEffect() chỉ được gọi một lần khi component được render. Dependency array được cung cấp là một mảng rỗng, điều này đảm bảo rằng hàm callback chỉ được gọi một lần khi component được render lần đầu tiên.
4.Cách sử dụng useEffect() trong nhiều trường hợp?
useEffect() có thể được sử dụng trong nhiều trường hợp khác nhau, tùy thuộc vào mục đích của ứng dụng. Sau đây là một số trường hợp sử dụng useEffect phổ biến:
- Tải dữ liệu từ API: Khi một component được render, có thể sử dụng useEffect để gọi API để lấy dữ liệu. useEffect sẽ được gọi mỗi khi có sự thay đổi trong dependency array.
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
ta sẽ reender data tại đây
}
- Tương tác với DOM: Khi cần thực hiện các thao tác với DOM, chẳng hạn như thêm hoặc xoá các element HTML, có thể sử dụng useEffect với các tham số dependency để trigger sự thay đổi.
function MyComponent() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const element = document.getElementById('my-element');
if (visible) {
element.classList.add('visible');
} else {
element.classList.remove('visible');
}
}, [visible]);
return (
<div>
<button onClick={() => setVisible(true)}>Show element</button>
<button onClick={() => setVisible(false)}>Hide element</button>
<div id="my-element"><a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">This</a> is my element</div>
</div>
);
}
- Subscribing và unsubscribing event listener: Khi tạo event listener, useEffect được sử dụng để đăng ký và hủy đăng ký listener. Điều này giúp tránh tình trạng “leaking” event listener trong các component không còn được sử dụng.
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const handleClick = () => setCount(count + 1);
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
};
}, [count]);
return (
<div>
<p>Count: {count}</p>
</div>
);
}
useEffect là một công cụ quan trọng để thực hiện các tác vụ liên quan đến side effect trong React. Tuy nhiên, việc sử dụng useEffect cần cẩn thận và hiểu rõ về dependency array để tránh các lỗi phổ biến.
