Tiếp nối bài viết về hook useEffect()thì hôm nay mình sẽ nói về hook useState() nha

useState() cũng là 1 hook cơ bản trong React, nó giúp mình sử dụng được state trong functional component

Nó cũng là 1 cái hàm thôi, đầu vào là 1 initialState có thể là giá trị hoặc cũng có thể là 1 function. Và đầu ra là 1 mảng có 2 phần tử tương ứng cho state và setState

Cú pháp: const [state, setState] = useState(initialState);

Lưu ý khi dùng useState() chỗ này nghen

const [person, setPerson] = useState({ name: "Tu", address: "Da Nang" });

setPerson({ name: "Tu Pham" });

– Mình ví dụ có 1 state person và khi mình setPerson như trên thì giá trị sẽ chỉ còn lại là { name: “Tu Pham” } và nó sẽ replace giá trị trước đó

Nên trường hợp này mình nên clone nó ra rồi mới setState thuộc tính mình cần như hình dưới nghen

const [person, setPerson] = useState({ name: "Tu", address: "Da Nang" });
setPerson({ ...person, name: "Tu Pham" });

– Inital state chỉ chạy 1 lần đầu tiên các lần render sau coi như vô nghĩa nên nếu giá trị ban đầu inital state xử lý phức tạp thì có thể xử lý như cách dưới đây để chỉ chạy đúng 1 lần đầu thôi nghen :D.

const [person, setPerson] = useState(() => {
  const initPerson = getPerson();
  return initPerson
});

– Mình sẽ dùng inital state dạng callback function thay vì nó là 1 giá trị. Và useState() sẽ đảm bảo rằng giá trị khởi tạo trong này chỉ chạy đúng 1 lần mà thôi, những lần render sau không render nữa hehe.

– Những giá trị khởi tạo state như chuỗi hoặc số thì có thể ghi thẳng trực tiếp còn lại những xử lý tính toán phức tạp thì nên cho vào callback function để tối ưu hơn nha