[Hooks] [Hooks ký sự] useId, useDeferredValue và useTransition

Chốt buổi cuối của series này nhé, hook cũng ít thôi mà =)))

useId()

Khái niệm

useId is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.

Chức năng

useId dùng để tạo ra một id độc nhất =))) Rất dễ hiểu và dễ sử dụng. =)))

Ví dụ

import { useId } from "react";

export default function App() {
  const id = useId();
  const id2 = useId();
  return (
    <div className="App">
      <label htmlFor={id+'-id'}>Do you like React?</label>
      <input id={id+'-id'} type="checkbox" name="react" />
      <p>id: {id}</p>
      <p>id2: {id2}</p>
    </div>
  );
}

id nó gen ra theo dạn :id: các bạn nhé =)))

useDeferredValue(value)

Đây là một hooks mới, kể từ React v18.0.0… Thật sự thì mình không hỗ trợ lắm,

Khái niệm

useDeferredValue accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.

Tạm dịch: useDeferredValue được truyền vào một value và trả về một bản sao nhưng được hoãn lại (delay or defer) nếu như đó là các urgent updates. Nếu giá trị render hiện tại là kết quả của các urgent update, các urgent update có thể là khi người dùng gõ input chẳng hạn, React sẽ trả về các giá trị trước đó cho đến khi urgent updates hoàn thành thì mới trả về giá trị mới.

Chức năng

• Thay vì ngay lập tức trả về giá trị mới được tạo ra bởi các urgent updates thì useDeferredValue sẽ giúp bạn tạm hoãn chuyện đó, khiến cho các lần ứng dụng bị “đứng hình mất 5s” trở nến hiếm hơn. Bạn nên xem ví dụ để hiểu hơn.

Ví dụ

Mình sẽ show code sử dụng useDeferredValue và ảnh gif màn hình sử dụng <> không sử dụng để bạn thấy chức năng khi dùng nó

import { useState, useDeferredValue } from "react";

const getList10000 = (key) => {
  const arr = [];
  for (let i = 0; i < 50000; i++) {
    if (String(i).includes(key)) {
      arr.push(<li key={i}>{i}</li>);
    }
  }
  return arr;
};

export default function App() {
  const [value, setValue] = useState("");
  const deferredValue = useDeferredValue(value);
  const suggestions = (
    <ul>{deferredValue ? getList10000(deferredValue) : null}</ul>
  );
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <div className="App">
      <div>
        <input onChange={handleChange} />
      </div>
      <div>
        {deferredValue !== value ? <p>loadingg</p> : <div>{suggestions}</div>}
      </div>
    </div>
  );
}

Code không quá khó hiểu nên mình sẽ show gif kết quả lúc dùng và không dùng useDeferredValue:

Với trường hợp mình dùng useDeferredValue:

Và khi không dùng:

Khi mình lần lượt gõ 1, 2, 3, …, 6 thì không có kết quả gì hiển thị cả vì lúc này function getList10000() đang làm gì đó.

useTransition()

Đây cũng là một hook mới v18 nhưng cũng không khó hiểu lắm, ở v17 đã có rồi nhưng chưa chính thức thôi.

Khái niệm

Returns a stateful value for the pending state of the transition, and a function to start it.

Tạm dịch: Trả về một giá trị trạng thái đang chờ và một hàm để bắt đầu nó khi mà function đang chờ xử lý của một transition.

const [isPending, startTransition] = useTransition();

Chức năng

• Lấy trạng thái chờ khi mà function đang được xử lý.

Ví dụ

Vẫn giống ví dụ trên nhé

import { useState, useDeferredValue, useTransition } from "react";

const getList10000 = (key) => {
  const arr = [];
  for (let i = 0; i < 50000; i++) {
    if (String(i).includes(key)) {
      arr.push(<li key={i}>{i}</li>);
    }
  }
  return arr;
};

export default function App() {
  const [value, setValue] = useState("");
  const deferredValue = useDeferredValue(value);
  const [isPending, startTransition] = useTransition();
  const suggestions = (
    <ul>{deferredValue ? getList10000(deferredValue) : null}</ul>
  );
  const handleChange = (e) => {
    startTransition(() => {
      setValue(e.target.value);
    });
  };
  return (
    <div className="App">
      <div>
        <input
          onChange={handleChange}
          style={{ backgroundColor: isPending ? "red" : "white" }}
        />
      </div>
      <div>
        {deferredValue !== value ? <p>loadingg</p> : <div>{suggestions}</div>}
      </div>
    </div>
  );
}

Kết luận

Thật sự thẳng thắng thì mình cũng chưa làm việc với 3 hooks này nhiều nên chưa chắc những gì mình nói là đúng, nếu lỡ nó sai thì hy vọng mọi người góp ý để tất cả chúng ta cùng phát triển.