چه زمانی از forwardRef توی ری‌اکت استفاده کنیم؟

درود دوستان 👋 توی این قسمت می‌خوایم بررسی کنیم forwardRef ری‌اکت برای چی معرفی شده و توی چه شرایطی به کارمون میاد. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست که توی اونها نکات و تجربیات پرکاربرد ری‌اکتی رو به شکل مختصر به اشتراک میذارم.

 

forwardRef چیه؟ 🤔

همونطور که می‌دونیم یکی از کاربردهای useRef توی ری‌اکت دسترسی مستقیم به یک المنت DOM هست. مثلاً می‌خوایم یک <input> دسترسی داشته باشیم و روی اون Focus کنیم. توی ری‌اکت برای انجام این کار از useRef استفاده می‌کنیم. اما اگه بخوایم از این قابلیت روی کامپوننتی که خودمون ساختیم استفاده کنیم:

function Input() {
  return <input />;
}

function App() {
  const ref = useRef(null);

  return <Input <<ref={ref}>> />
}

ری‌اکت به ما چنین اخطاری رو میده به این معنی نمی‌تونیم به صورت مستقیم از این قابلیت روی یک کامپوننتی که خودمون ساختیم استفاده کنیم:

Warning: Function components cannot be given refs.
Attempts to access this ref will fail.
Did you mean to use React.forwardRef()?

همونطور که می‌بینیم ری‌اکت استفاده از forwardRef رو بهمون معرفی کرده. پس از این قابلیت زمانی استفاده می‌کنیم که می‌خوایم از useRef روی یک کامپوننت استفاده کنیم. forwardRef یک HOC هست. یعنی خودش یک کامپوننت هست و کامپوننت مد نظر ما رو می‌گیره، تغییراتی توی اون اعمال می‌کنه و نهایتاً اون رو به ما تحویل میده.

نمونه کد بالا رو به صورت تغییر می‌دیم:

import { forwardRef } from 'react';

const Input = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

function App() {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.focus();
  };

  return (
    <>
      <Input <<ref={ref}>> />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

 با اجرای کد بالا دیگه اون اخطار رو نمی‌گیریم و کامپوننت Input به‌راحتی به ref پاس داده شده دسترسی داره و می‌تونه از اون توی خودش استفاده کنه.

 

تغییرات ری‌اکت ۱۹

توی ری‌اکت ۱۹ برای پاس دادن ref دیگه لازم نیست از forwardRef استفاده کنیم. توی این ورژن، ref مثل یک پراپرتی (prop) قابل دسترس هست:

function MyInput(props) {
  return <input ref={<<props.ref>>} />
}

// ...
<MyInput ref={ref} />

خب دوستان امیدوارم از این قسمت استفاده کرده باشین. تا یه قسمت دیگه روزتون خوش 😉✌️