Contents
    Kapan sebaiknya Anda menggunakan useState vs. useRef?

    Kapan sebaiknya Anda menggunakan useState vs. useRef?

    Memahami persamaan dan perbedaan antara useState dan useRef

    Posted by Jagad on May 24, 2022
    -- views

    4 min read

    Pengantar

    React adalah library yang paling banyak digunakan. React populer karena mudah digunakan, sehingga cocok untuk startup. React Hooks adalah salah satu keunggulan yang ditawarkan.

    React menjadi lebih mudah sejak rilis hook, tetapi mungkin juga merepotkan karena kegunaannya yang serupa, misalnya useState dan useRef.

    Pada artikel ini, kita akan membahas kapan harus menggunakan useState dan useRef.

    useState vs useRef Meme

    Memahami useState hooks

    UseState adalah hook yang memungkinkan Anda membuat variabel status dalam komponen fungsional. State umumnya mengacu pada data yang disimpan dalam sebuah komponen.

    Di bawah ini adalah contoh kode untuk mengilustrasikan useState.

    import React from 'react';
    
    const App = () => {
      const [value, setValue] = React.useState();
    
      const handleInputChange = (e) => {
        setValue(e.target.value);
      };
    
      console.log('check render');
    
      return (
        <>
          <div className='App'>
            <input value={value} onChange={handleInputChange} />
          </div>
        </>
      );
    };
    
    export default App;
    

    Dalam contoh di atas, useState() mendeklarasikan variabel status sementara nilainya disimpan dalam variabel value. setValue adalah fungsi yang digunakan untuk memperbarui nilai ini. Setiap kali nilai input berubah, itu menyebabkan rendering ulang komponen.

    useState Hooks example

    Memahami useRef hooks

    useRef adalah hook yang memungkinkan kita untuk menyimpan atau mempertahankan nilai variabel di antara render. useRef juga dapat digunakan untuk menyimpan nilai yang dapat diubah yang tidak menyebabkan rendering ulang.

    Di bawah ini adalah contoh kode untuk mengilustrasikan useRef.

    import React from 'react';
    
    const App = () => {
      const inputEl = React.useRef();
      const [value, setValue] = React.useState();
    
      const handleClick = () => {
        setValue(inputEl.current.value);
      };
    
      console.log('check render');
    
      return (
        <>
          <div className='App'>
            Value: {value}
            <input ref={inputEl} />
            <button onClick={handleClick}>Render</button>
          </div>
        </>
      );
    };
    
    export default App;
    

    Pada contoh di atas kita menggunakan useRef untuk menyimpan nilai dari elemen input. dengan bantuan useRef, kita tidak menyebabkan siklus render pada setiap perubahan elemen input. kita hanya menyebabkan rendering ulang ketika tombol diklik. Hal tersebut dapat dilihat pada gambar di bawah ini.

    useRef Hooks example

    Kapan menggunakan useRef dan useState

    Perbedaan terbesar antara useState dan useRef adalah useState menyebabkan rendering ulang. sedangkan useRef tidak menyebabkan rendering ulang.

    Misalnya, jika kita hanya ingin mengirimkan form, kita perlu menggunakan useRef karena kita tidak ingin melakukan rendering ulang yang tidak perlu.

    import React from 'react';
    
    const App = () => {
      const inputEl = React.useRef();
    
      const handleClick = () => {
        console.log(inputEl.current.value);
      };
    
      return (
        <>
          <div className='App'>
            <input ref={inputEl} />
            <button onClick={handleClick}>Submit</button>
          </div>
        </>
      );
    };
    
    export default App;
    
    when to useRef and useState (1)

    Tetapi jika kita ingin memvalidasi input, kita harus menggunakan useState. Dalam hal ini kita membuat validasi dimana input tidak boleh kurang dari 6 karakter.

    import React from 'react';
    
    const App = () => {
      const [value, setValue] = React.useState();
    
      const isValidate = value.length > 5;
      console.log(isValidate);
    
      const handleInputChange = (e) => {
        setValue(e.target.value);
      };
    
      return (
        <>
          <div className='App'>
            {isValidate ? 'Succes' : 'need more than 5 letters'}
            <input value={value} onChange={handleInputChange} />
          </div>
        </>
      );
    };
    
    export default App;
    
    when to useRef and useState (2)

    Secara pribadi, saya percaya bahwa jika state muncul pada UI, maka harus menggunakan useState; jika tidak, maka harus menggunakan useRef. Dengan begitu, kita bisa menghemat rendering yang tidak perlu. Tentu saja, ada pengecualian jika, misalnya, kita ingin menggabungkan dengan hooks lain.

    Contoh lain, jika kita membuat toggle mode gelap, kita harus menggunakan useState karena state tersebut mempengaruhi UI dan kita juga harus melakukan merender ulang.

    import React from 'react';
    import './App.css';
    
    const App = () => {
      const [darkMode, setDarkMode] = React.useState(false);
    
      const handleClick = () => {
        setDarkMode(!darkMode);
      };
    
      console.log('check render');
    
      return (
        <>
          <div className={darkMode ? 'darkMode' : ''}>
            <button onClick={handleClick}>Switch Mode</button>
          </div>
        </>
      );
    };
    
    export default App;
    

    Pada contoh di atas, kita menggunakan useState untuk mengaktifkan mode gelap. Saat tombol diklik, setDarkMode diubah ke nilai kebalikan dari state saat ini.

    Toggle Dark Mode

    Lalu bagaimana background bisa berubah? Itu karena di bagian class ada operator ternary di mana ketika darkMode adalah true, maka className adalah "darkMode" dan ketika darkMode adalah false, maka kita biarkan className kosong.

    Kesimpulan

    Kedua hooks memiliki kegunaan dan tujuan yang berbeda, meskipun terlihat sama. Kedua hooks tersebut dapat digunakan dan digabungkan bergantung pada situasi.

    Referensi


    Post Reactions
    LIKE
    LOVE
    Wow
    YAY
    Contributors

    The writing on this website may contain errors in grammar, punctuation, etc. Please make a contribution here