React Tip – Loading data

Hiện nay sử dụng React Hook làm cho component trở nên gọn nhẹ và tiết kiệm được nhiều dòng code. React Hook đã đem đầy đủ life cycle của React lên cho functional component. Dưới đây là cách sử dụng useEffect để tải dữ liệu cho component.

1. Tải dữ liệu khi First-Load.

Ta có thể sử dụng useEffect hôk với tham số thứ hai là mảng rỗng để tải dữ liệu lúc component mới được tải lên. Ta có thể tham khảo ví dụ dưới đây:



import React, { useEffect, useState } from "react";

export default function App() {

	const [data, setData] = useState({});
 
	const loadData = async () => {
 
		const res = await fetch("https://api.agify.io/?name=michael");

		setData(await res.json());
 };

 
	useEffect(() => {

		loadData();

		return () => {};

	}, []);


 return <p>{data.name}</p>;
}




Đoạn code trên tải dữ liệu từ API và lưu vào data thông qua setData.

Ta gọi loadData trong useEffect, với tham số thữ hai là chuỗi rỗng thì callback trong useEffect chỉ được gọi một lần duy nhất khi tải component lần đầu tiên.

React sẽ render dữ liệu tải về lên ui.

2. Tải dữ liệu khi props thay đổi

Khi ta thêm prop vào tham số thứ hai của useEffect thì khi prop thay đổi, callback (tham số thứ nhất) sẽ được gọi lại.

Ta có thể viết lại ví dụ trên như sau:


import React, { useEffect, useState } from "react";

export default function App() {

	const [data, setData] = useState({});
	const [name, setName] = useState("");

 
	const loadData = async () => {
 
		const res = await fetch("https://api.agify.io/?name=" + name);

		setData(await res.json());
 	};

 
	useEffect(() => {

		loadData();

		return () => {};

 }, [name]);


	return <div>
		<input value={name} onChange={(evt) => setName(evt.target.value)} />
		<p>{data.name}</p>
	<div>;


Với cập nhật trên thì khi name thay đổi, callback trong useEffect sẽ được gọi lại. React sau đó sẽ cập nhật lại giá trị vào data và render lại.

Tóm lại

Để gọi api trong React Hook thì ta nên dùng useEffect. Tham số thứ hai của useEffect sẽ quyết định khi nào gọi api. Nếu tham số hai là chuỗi rỗng thì api sẽ được gọi một lần duy nhất khi tải component. Nếu tham số hai có giá trị thì api sẽ được gọi mỗi khi giá trị đó thay đổi.