Thử xem 2 ví dụ bên dưới nhé, mình xem thử xem có sự khác biệt không nhé. 

VD 1: 

import {createRef} from 'react' 

const FocusInput = () => {
   const inputEl = createRef()

   const focusInput = () => {
      inputEl.current.focus()
   }

   return (
      <>
         <input ref={inputEl} type="text" />
         <button onClick={focusInput}>Focus input</button>
      </div>
   )
}

VD 2:

const FocusInput = () => {
   const inputEl = React.useRef()

   const focusInput = () => {
      inputEl.current.focus()
   }

   return (
      <>
         <input ref={inputEl} type="text" />
         <button onClick={focusInput}>Focus input</button>
      </>
   )
}

Về cơ bản có lẽ là không khác biệt. Nhưng thật sự khác biệt lớn lắm.

Đối với createRef thì mỗi lần component gọi nó được render thì nó sẽ tạo ra một ref mới.

Còn đối với useRef thì trả về cùng một ref khi render. có nghĩa là giá trị nó không được tạo mới lại. 

 

Viết bởi : vndevops.com