Hooks,State,Props dengan TypeScript di React

Hooks adalah fitur yang diperkenalkan dalam React versi 16.8 untuk memungkinkan penggunaan state dan fitur-fitur React lainnya dalam functional components. TypeScript dapat digunakan bersama dengan Hooks untuk memberikan dukungan tipe statis dan meningkatkan keamanan kode. Berikut adalah beberapa konsep dasar dalam penggunaan Hooks dengan TypeScript di React:

1. Tipe State dan Props: Pertama, harus mendefinisikan tipe untuk state dan props yang digunakan dalam komponen. Ini dapat dilakukan menggunakan interface seperti yang telah dijelaskan sebelumnya.

2. Penggunaan useState Hook: Hooks utama yang paling umum digunakan adalah useState, yang memungkinkan komponen functional untuk memiliki state. Saat menggunakan TypeScript, dapat memberikan tipe secara eksplisit untuk state yang disimpan dalam hook useState. Misalnya:

   import React, { useState } from 'react';
   
   interface MyComponentProps {
     name: string;
   }
   
   const MyComponent: React.FC<MyComponentProps> = (props) => {
     const [count, setCount] = useState<number>(0); // Tipe state ditentukan sebagai number
   
     return (
       <div>
         <p>Name: {props.name}</p>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }
   
   export default MyComponent;

   Dalam contoh di atas, count didefinisikan sebagai state dengan tipe number.

3. Penggunaan useEffect Hook: Jika perlu melakukan efek samping, seperti mengambil data dari server atau berlangganan ke event, dapat menggunakan hook useEffect. Dalam TypeScript, dapat menentukan tipe dari nilai yang dikembalikan oleh useEffect (fungsi bersih atau fungsi bersih yang mengembalikan fungsi bersih).

   import React, { useState, useEffect } from 'react';
   
   interface MyComponentProps {
     name: string;
   }
   
   const MyComponent: React.FC<MyComponentProps> = (props) => {
     const [data, setData] = useState<string>('');
   
     useEffect(() => {
       // Contoh penggunaan useEffect untuk memuat data saat komponen dimuat
       fetchData();
     }, []); // Kita menggunakan array kosong agar efek ini hanya berjalan sekali setelah komponen dimuat
   
     const fetchData = async () => {
       const response = await fetch('https://api.example.com/data');
       const result = await response.json();
       setData(result);
     }
   
     return (
       <div>
         <p>Name: {props.name}</p>
         <p>Data: {data}</p>
       </div>
     );
   }
   
   export default MyComponent;

   Dalam contoh di atas, kita menentukan bahwa useEffect tidak memiliki dependensi, sehingga efek tersebut hanya berjalan sekali setelah komponen dimuat.

Ini adalah beberapa konsep dasar dalam penggunaan Hooks dengan TypeScript di React. Dengan menggunakan TypeScript bersama dengan Hooks, dapat menghasilkan kode yang lebih aman dan lebih mudah dipelihara.