Hôm qua cái app của mình chạy lỗi, kết quả là database lộn tùng phèo lên, may mắn là mình có backup hằng ngày. Nói chung phương châm sống của mình là: “always have a backup plan” chưa bao giờ là sai cả.

Khoe luôn tí là một vài bạn bảo giao diện của code box mình ở dark mode nhìn nát quá nên mình vừa update lại đấy, nhìn ngầu hơn chưa nào =)))

useDebugValue(value)

Khái niệm

useDebugValue can be used to display a label for custom hooks in React DevTools.

Chức năng

Đọc khái niệm thôi bạn cũng biết là nó dùng để debug custom hooks đúng không nào, và nơi hiển thị debug là ở React DevTools. Cách dùng thì như vậy:

1
useDebugValue(isOnline ? 'Online' : 'Offline');

Ví dụ

Vì ví dụ liên quan đến custom hooks nên mình dùng lại ví dụ ở ví dụ custom hooks

Ở ví dụ cũ mình có cái DevTools nó show giao diện như thế này, thẳng thắng mà nói thì không có gì đặc biệt cả đúng hông nào

https://i.imgur.com/hauNMBr.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function useTroll(count) {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(0);
  useEffect(() => {
    (async () => {
      setIsLoading(true);
      await sleep(count * 1000);
      let _result = 0;
      for (let _i = 0; _i < count; _i++) {
        _result += _i;
      }
      setData(_result);
      setIsLoading(false);
    })();
  }, [count]);
  useDebugValue(isLoading ? "loadingggggg" : "show form");
  useDebugValue(data);
  return { isLoading, data };
}

Mình nhẹ nhàng thêm dòng 2 dòng bên dưới vào vào và ngay lập tức React DevTools nó show như vậy.

1
2
useDebugValue(isLoading ? "loadingggggg" : "show form");
useDebugValue(data);

https://i.imgur.com/Ml8ofFH.png

Hooks này chủ yếu hỗ trợ debug với custom hook nên có thể nói cũng không thường xuyên được nhìn thấy cũng như được sử dụng (hoặc không). =)))

useImperativeHandle()

Hí hí, đọc trong tài liệu mình mới biết có hooks này, để mình tìm hiểu xem nó làm gì chứ cả đời mình chưa từng đụng nên nó luôn nên hông nhớ

Khái niệm

useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef.

Tạm dịch: useImperativeHandle cho phép bạn truyền ref đến components cha. Và như thường lệ, nó sinh ra để hỗ trợ cho ref và nên tránh dùng trong tất cả các trường hợp, useImperativeHandle nên được dùng với forwardRef.

Chức năng

  • Để truyền ref từ con sang cha.

Ví dụ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useRef, useImperativeHandle, forwardRef } from "react";

const Input = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => inputRef.current);

  return <input type="text" ref={inputRef} />;
});

export default function App() {
  const inputRef = useRef();

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => inputRef.current.focus()}>focus</button>
      <Input ref={inputRef} />
    </div>
  );
}

Thật sự mình rất ít dùng, có thể hôm nay là lần đầu mình dùng hooks này đấy :3

https://s8.gifyu.com/images/CPT2206241035-786x312.gif

Kết luận

Xong 10 hook mà từ lúc cha sinh mẹ đẻ đến giờ mình hay sử dụng, còn 3 hooks mới từ React 18 là useDeferredValue, useTransition, useId mình sẽ cố gắng tìm hiểu vào done luôn trong tuần này.