Hooks Lanjutan pada React useContext dan useRef

React Hooks merupakan fitur baru yang ditambahkan pada versi 16.8 dari React, yang memungkinkan Anda menggunakan state dan lifecycle methods pada function components. Hooks lnajutan pada react yang paling sering digunakan adalah useContext dan useRef.

Hooks Lanjutan useContext

useContext adalah Hook yang memungkinkan Anda untuk mengakses context dari sebuah component tanpa harus melalui props drilling. Context dibuat dengan menggunakan React.createContext dan dapat diakses dengan menggunakan useContext pada function component.

Contoh penggunaan useContext adalah sebagai berikut:

import React, { useContext } from 'react';

const MyContext = React.createContext();

function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

function Parent() {
  return (
    <MyContext.Provider value="Hello World">
      <Child />
    </MyContext.Provider>
  );
}

Pada contoh di atas, kita membuat context dengan nama MyContext dan menggunakan MyContext.Provider untuk memberikan nilai kepada context. Kemudian, pada function component Child, kita dapat mengakses nilai dari context tersebut dengan menggunakan useContext.

Hooks Lanjutan useRef

Selain useContext, kita juga dapat menggunakan Hook useRef untuk menyimpan referensi DOM pada function component. useRef dapat digunakan untuk mengakses properti DOM, seperti value pada input field atau current pada element HTML.

Contoh penggunaan useRef adalah sebagai berikut:

import React, { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  function focusInput() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

Pada contoh di atas, kita menggunakan useRef untuk menyimpan referensi DOM dari input field. Kemudian, kita dapat mengakses properti focus pada input field dengan menggunakan inputRef.current.focus().

Selain itu, useRef juga dapat digunakan untuk menyimpan nilai yang tidak akan diubah-ubah selama proses render component. Misalnya, jika Anda ingin menyimpan nilai dari suatu form yang tidak ingin diubah setelah form tersebut di-submit, Anda dapat menggunakan useRef untuk menyimpan nilai tersebut.

Contoh penggunaan useRef untuk menyimpan nilai yang tidak akan diubah-ubah adalah sebagai berikut:

import React, { useRef } from 'react';

function Example() {
  const formRef = useRef({});

  function handleSubmit(event) {
    event.preventDefault();
    const formData = formRef.current;
    // do something with form data
  }

  return (
    <form onSubmit={handleSubmit} ref={formRef}>
      <input name="name" />
      <input name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Pada contoh di atas, kita menggunakan useRef untuk menyimpan referensi dari form element dan menyimpan nilai dari form tersebut pada saat submit. Dengan demikian, kita dapat mengakses nilai dari form tersebut setelah form di-submit tanpa perlu menyimpan nilai tersebut pada state.

Kesimpulannya, Hooks useContext, useRef merupakan fitur yang sangat berguna dalam pengembangan aplikasi React. Masing-masing Hook memiliki fungsi yang berbeda, sehingga dapat disesuaikan dengan kebutuhan yang Anda miliki pada aplikasi Anda. Jadi, jika Anda ingin mengakses context, menyimpan referensi DOM, atau menambahkan state dan efek pada function component, Anda dapat menggunakan Hooks yang telah disebutkan di atas.