🔬 Praktikum 10: Lifecycle & Advanced Hooks

Tujuan Praktikum

Memahami lifecycle component dengan useEffect

Menggunakan useCallback, useMemo untuk optimasi

Membuat custom hooks yang reusable

A. useEffect untuk Data Fetching

import { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Fetch data saat component mount
    fetchUsers();
  }, []); // [] = hanya jalan sekali

  const fetchUsers = async () => {
    try {
      const res = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await res.json();
      setUsers(data);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return (
    
      
    
  );

  return (
    
      Daftar User dari API
       item.id.toString()}
        renderItem={({ item }) => (
          
            {item.name}
            {item.email}
          
        )}
      />
    
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 50 },
  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 16 },
  card: { backgroundColor: '#f5f5f5', padding: 16, borderRadius: 10, marginBottom: 8 },
  name: { fontSize: 16, fontWeight: 'bold' },
  email: { fontSize: 13, color: '#666' },
});

B. useEffect Cleanup (Timer & Subscription)

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Timer berjalan...');
  }, 1000);

  // Cleanup: hentikan timer saat component unmount
  return () => clearInterval(timer);
}, []);

C. Custom Hook: useFetch

// hooks/useFetch.js
import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        const json = await res.json();
        setData(json);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

// Penggunaan di component:
// const { data, loading, error } = useFetch('https://api.example.com/data');

D. useMemo & useCallback

import { useState, useMemo, useCallback } from 'react';

function App() {
  const [items, setItems] = useState([]);
  const [search, setSearch] = useState('');

  // useMemo: hitung ulang hanya jika items/search berubah
  const filteredItems = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [items, search]);

  // useCallback: fungsi tidak dibuat ulang setiap render
  const handleDelete = useCallback((id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  }, []);

  return (/* ... */);
}

E. Tugas Praktikum 10

1. Buat aplikasi yang fetch data dari API publik (pilih: posts/pokemon/products)

2. Gunakan custom hook useFetch untuk data fetching

3. Tampilkan loading indicator dan error handling

4. Implementasikan pull-to-refresh (RefreshControl)

5. Screenshot dan kumpulkan source code