Sơ lược useRef - fowardRef - useImperativeHandle trong ReactJS

1. useRef trong cùng component

• Khi cả input và button đều trong một Component
• Khởi tạo inputRef bằng cách sử dụng hook useRef với giá trị ban đầu là null
• Gán vào thẻ input thông qua thuộc tính ref={inputRef}
• Khi click vào button thì set focus vào input

import { useRef } from 'react'

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

  const handleClick = () => {
    inputRef.current.focus()
  }

  return (
    <>
      <input ref={inputRef} placeholder="Search..." />
      <button onClick={handleClick}>Set focus</button>
    </>
  )
}

Demo: https://codesandbox.io/s/useref-simple-yc38mc

2. fowardRef từ component cha -> con

• Chuyển tiếp fowardRef từ component cha xuống component con
• Tạo inputRef tại component cha
• Component cha truyền inputRef cho component con như bên dưới

import { useRef } from 'react'
import MyInput from './components/MyInput'

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

  const handleClick = () => {
    inputRef.current.focus()
  }

  return (
    <>
      <MyInput ref={inputRef} placeholder='Search...' />
      <button onClick={handleClick}>Set Focus</button>
    </>
  )
}

• Tách input ra thành component con MyInput
• Dùng fowardRef để nhận đầu vào các props và ref là tham số thứ hai

import { forwardRef } from 'react'

const MyInput = forwardRef((props, ref) => {
  const { placeholder, ...otherProps } = props

  return <input {...otherProps} ref={ref} placeholder={placeholder} />
})

export default MyInput

Demo: https://codesandbox.io/s/fowardref-p3c8mf

3. fowardRef toàn bộ

• Ở ví dụ 2 khi chúng ta tách input ra thành một component con
• Chúng ta đã public ra ngoài toàn bộ input này cho component cha
• Nên ở component cha có toàn quyền kiểm soát input này
• Điều này có thể gây ra những lỗi tiềm ẩn cho nội tại input đó
• Ví dụ như component cha xóa input đó thì có thể gây lỗi logic bên trong component con
• Ví dụ bên dưới component cha có thể xóa được luôn cả input đấy đi

import { useRef } from 'react'
import MyInput from './components/MyInput'

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

  const handleClick = () => {
    inputRef.current.remove() // DANGER
  }

  return (
    <>
      <MyInput ref={inputRef} placeholder='Search...' />
      <button onClick={handleClick}>Remove input</button>
    </>
  )
}

Demo: https://codesandbox.io/s/fowardref-2-wm5cq5

4. useImperativeHandle

• Để tránh việc public toàn bộ input ta sử dụng useImperativeHandle
• Chúng ta sẽ chỉ public những gì có thể tương tác với input đó mà thôi
• Tại component con ta sử dụng inputRef nội tại của nó
• Gán vào thẻ input thông qua thuộc tính ref={inputRef}
• Sử dụng hook useImperativeHandle nhận ref từ component cha
• Public method setFocus để component cha có thể sử dụng
• Component cha chỉ có thể sử dụng method này để tương tác với component con

import { forwardRef, useRef, useImperativeHandle } from 'react'

const MyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null)

  useImperativeHandle(
    ref,
    () => ({
      setFocus() {
        inputRef.current.focus()
      }
    }),
    []
  )

  const { placeholder, ...otherProps } = props

  return <input {...otherProps} ref={inputRef} placeholder={placeholder} />
})

export default MyInput

import { useRef } from 'react'
import MyInput from './components/MyInput'

export default function App() {
  const myInputRef = useRef(null)

  const handleClick = () => {
    myInputRef.current.setFocus()
  }

  return (
    <>
      <MyInput ref={myInputRef} placeholder='Search...' />
      <button onClick={handleClick}>Set Focus</button>
    </>
  )
}

Demo: https://codesandbox.io/s/useimperativehandle-5zq3dm