[Hooks] [Hooks ký sự] useState và useRef

Không ngờ có đứa em của mình thích series này nên muốn mình viết tiếp, mà trước đến giờ thì mình chưa bao giờ là người muốn phụ lòng những người yêu mến mình cả 😊 và hôm nay mình sẽ tiếp tục với 2 hooks thường được sử dụng nhưng ít người để ý useState và useRef

useState

Khái niệm

The React useState Hook allows us to track state in a function component.

const [state, setState] = useState(initialStateValue)

Chức năng

Để đùng state bên trong function component mà không cần khởi tạo class.

Ví dụ

import { useState } from "react";
 
export default function App() {
  const [count, setCount] = useState(0);
  const [randomID, setRandomID] = useState();
  const troll = (_count) => {
    let _result = 0;
    for (let _i = 0; _i < _count * 500000000; _i++) {
      _result += _i;
    }
    return _result;
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <div>count: {count}</div>
      <button onClick={() => setRandomID(Math.round(Math.random() * 10))}>
        random
      </button>
      <div>randomID: {randomID}</div>
      <div>troll: {troll(count)}</div>
    </div>
  );
}

Mình vẫn dùng ví dụ cũ của hôm qua, ở đây initialStateValue bạn có thể có hoặc không, nếu không thì giá trị của nó là undefined. Và tốc độ app vẫn chậm như hôm qua neus random thôi, nếu như dùng state mà không có memo 😂

useRef

Khái niệm

The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

Chức năng

• Cho phép truy cập vào trị của được giữ nguyên khi giữa các lần re-render.
• Dùng sử dụng để lưu một giá trị có thể thay đổi nhưng không cần re-render.
• Dùng để truy cập trực tiếp vào một DOM.

Ví dụ

import { useState, useRef } from "react";
 
export default function App() {
  const count = useRef(0);
  const [randomID, setRandomID] = useState();
  const troll = (_count) => {
    let _result = 0;
    for (let _i = 0; _i < _count * 500000000; _i++) {
      _result += _i;
    }
    return _result;
  };
  const updateCount = () => {
    count.current = count.current + 1
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => updateCount()}>+</button>
      <div>count: {count.current}</div>
      <button onClick={() => setRandomID(Math.round(Math.random() * 10))}>random</button>
      <div>randomID: {randomID}</div>
      <div>troll: {troll(count.current)}</div>
    </div>
  );
}

Tương tự bây giờ mình dùng count là một ref và khi mình cộng thoải mái thì không có gì xảy ra cả, vì lúc này component không được re-render nên thành ra, khi mình change randomID thì lúc đó function mới được re-render và ác mộng đến, tốc độ load cực chậm vì count và troll của mình đã làm chuyện nó nên làm là làm cho ứng dụng chậm đến ức chế.

Nhưng mà thông thường mình thấy người ta thường dùng ref để truy cập vào DOM, kiểu thế này nè:

const inputRef = useRef();
<input type="text" ref={inputRef} />

Rồi sử dụng bằng cách:

<button onClick={() => inputRef.current.focus()}>Focus inputRef</button>

Hoặc đôi khi dùng để track giá trị previous của state nào đó, nhưng ở bài viết này mình không đề cập. Chủ yếu để các bạn biết rằng là ref thực sự không thường được dùng để thay thế state.

So sánh giữa useState vs useRef

Trước tiên thì mình sẽ nói về khác nhau nè:

title	useState	useRef
re-render	Yesss	No
persisted when re-rendering	No	Yes
asynchronous	Yes	No

Điểm chung thì tất nhiên như mình nói ở trên, nó dùng để lưu một cái gì đó. Nếu như thứ bạn cần lưu không đụng tới 3 yếu tố trên thì ref and state có thể thay thế cho nhau. (Tất nhiên khi làm việc với React thì chuyện này rất khó xảy ra 😂

Kết luận

Đã được một người bạn bảo rằng series này khá vui nên mình đã viết thêm, vừa để chia sẻ vừa để nhớ lại kiến thức. Bởi vì: “chia sẻ là còn mãi” mà 😂

P/s: À, note thêm thật ra mình đang thực hiện challenge thôi, chức cũng không phải muốn chia sẻ lắm đâu, hì hì 😂