25 Tips optimasi React untuk meningkatkan kinerja dan kualitas kode – Beragampengetahuan

Pengembangan React yang efektif bukan hanya tentang penerapan fungsionalitas, namun juga tentang penulisan kode yang bersih, berkinerja baik, dan dapat dipelihara. Baik Anda membuat aplikasi sederhana atau UI yang kompleks, menguasai teknik pengoptimalan adalah kunci untuk memberikan pengalaman pengguna yang lebih baik dan memastikan skalabilitas.

Panduan komprehensif ini mengumpulkan 25 tips optimasi React, yang mencakup kinerja, praktik coding, manajemen status, fitur lanjutan, dan praktik terbaik. Kiat-kiat ini akan membantu Anda menyederhanakan alur kerja, meningkatkan aplikasi, dan berkembang sebagai pengembang React.

Bagian 1: Tip Pengoptimalan Kinerja

1. Hindari mendeklarasikan komponen di dalam komponen lain

Mendeklarasikan komponen dalam komponen lain mungkin tampak mudah, namun dapat menyebabkan pembuatan ulang yang tidak perlu dan masalah kinerja. Ekstrak komponen yang disarangkan untuk mempertahankan statusnya dan menghindari rendering ulang selama pembaruan induk.

1 
2 const UsersList = () => {
3   const User = ({ user }) => <div>{user.name}</div>;
4   return <User user={{ name: 'John' }} />;
5 };
6 
7 
8 const User = ({ user }) => <div>{user.name}</div>;
9 const UsersList = () => <User user={{ name: 'John' }} />;

2. Penggunaan array dependen yang benar di useEffect

Variabel eksternal yang direferensikan dalam useEffect selalu disertakan dalam array dependensi. Hal ini mencegah kesalahan seperti penutupan basi dan memastikan bahwa efek hanya berjalan bila diperlukan.

1 useEffect(() => {
2   fetchUserData(id);
3 }, [id]); 

3. Gunakan useState untuk menunda status inisialisasi

Untuk komputasi yang mahal, gunakan fungsi untuk menginisialisasi status dengan malas. Hal ini memastikan bahwa penghitungan hanya dijalankan saat pertama kali komponen dirender.

1 const [value, setValue] = useState(() => calculateInitialValue());

4. Ingat perhitungan yang mahal useMemo

menggunakan useMemo Simpan hasil fungsi yang mahal dalam cache dan hindari perhitungan yang berlebihan selama rendering.

1 const sortedUsers = useMemo(() => users.sort((a, b) => a.age - b.age), [users]);

5. Gunakan Hooks khusus untuk membuat logika yang dapat digunakan kembali

Ekstrak logika umum ke dalam kait khusus untuk penggunaan kembali yang lebih baik dan komponen yang lebih bersih.

1 function useFetch(url) {
2   const [data, setData] = useState(null);
3   useEffect(() => {
4     fetch(url).then(res => res.json()).then(setData);
5   }, [url]);
6   return data;
7 }

6. Gunakan React.Fragment Hindari node DOM tambahan

Gunakan metode berikut untuk mengelompokkan elemen tanpa menambahkan node DOM yang tidak diperlukan React.Fragment atau singkatan <> </>.

1 return (
2   <>
3     <Child1 />
4     <Child2 />
5   </>
6 );

7. Manfaatkan komponen komposit untuk fleksibilitas

Bangun komponen yang dapat digabungkan untuk konstruksi UI yang fleksibel.

1 function Tabs({ children }) {
2   return <div>{children}</div>;
3 }
4 
5 Tabs.Tab = ({ label, children }) => (
6   <div>
7     <h3>{label}</h3>
8     <div>{children}</div>
9   </div>
10 );
11 
12 
13 <Tabs>
14   <Tabs.Tab label="Tab 1">Content 1</Tabs.Tab>
15 </Tabs>;

8. Selalu gunakan kunci unik saat merender daftar

Gunakan unik key Props item daftar membantu React mengenali perubahan secara efisien. Hindari menggunakan indeks array sebagai kunci.

1 {items.map(item => <Item key={item.id} {...item} />)}

9. Menerapkan pemuatan lambat IntersectionObserver

Optimalkan halaman panjang dengan memuat konten seperti gambar atau video hanya saat muncul di area pandang.

1 useEffect(() => {
2   const observer = new IntersectionObserver(entries => {
3     entries.forEach(entry => {
4       if (entry.isIntersecting) {
5         loadContent();
6       }
7     });
8   });
9   observer.observe(elementRef.current);
10 }, []);

10. Minimalkan hal-hal yang tidak diperlukan useEffect Dan setState panggilan

Hindari pembaruan status yang berlebihan atau efek yang memicu perenderan ulang yang tidak perlu.

1 
2 useEffect(() => {
3   setValue(computeValue());
4 }, [dependency]);
5 
6 
7 const value = computeValue();

Bagian 2: Praktik Pengkodean dan Praktik Terbaik

Gunakan batasan kesalahan untuk membangun aplikasi yang tangguh

Cegah kerusakan dalam produksi dengan membungkus komponen dengan batas kesalahan.

1 <ErrorBoundary FallbackComponent={ErrorPage}>
2   <App />
3 </ErrorBoundary>

12. Pecahkan komponen besar menjadi komponen yang lebih kecil

Pisahkan komponen besar menjadi bagian yang lebih kecil dan dapat digunakan kembali agar lebih mudah dibaca dan dirawat.

1 const Header = () => <header>{}</header>;
2 const Footer = () => <footer>{}</footer>;

13. Selalu berikan nilai awal useState

Hindari keadaan yang tidak diinisialisasi untuk mencegah masalah runtime.

1 const [items, setItems] = useState([]);

14. Sederhanakan logika dengan menyatukan fungsi

Gabungkan fungsi terkait untuk mengurangi duplikasi.

1 const toggleModal = () => setIsOpen(open => !open);

15. Memahami perilaku pembaruan status

Pembaruan status React tidak sinkron. Gunakan callback atau nilai turunan dengan hemat untuk menghindari data basi.

1 setCount(prevCount => prevCount + 1);

16. Hindari penggunaan konteks yang berlebihan

Gunakan Konteks untuk pohon komponen dalam. Hindari penggunaan passing prop sederhana karena akan menimbulkan kerumitan yang tidak perlu.

17. Gunakan null sebagai keadaan awal suatu objek*

Inisialisasi objek dalam keadaan dengan null daripada objek kosong untuk menghindari perilaku yang tidak terduga.

1 const [user, setUser] = useState(null);

18. Buat komponen penyedia untuk konteksnya

Paket Context.Provider dalam komponen penyedia khusus untuk mencegah rendering yang berlebihan.

1 export const AuthContextProvider = ({ children }) => {
2   const [user, setUser] = useState(null);
3   return (
4     <AuthContext.Provider value={{ user, setUser }}>
5       {children}
6     </AuthContext.Provider>
7   );
8 };

19. Hindari penggunaan operator logika untuk rendering bersyarat

Mencegah nilai yang tidak diinginkan dirender secara tidak sengaja, mis. 0 Dengan menggunakan operator ternary atau konversi Boolean.

1 {users.length > 0 ? <UserList /> : null}

Bagian 3: Pengelolaan Negara

20. Gunakan konteks untuk menghindari pengeboran penyangga

Manfaatkan Konteks untuk berbagi data global, seperti tema atau pengaturan pengguna, tanpa penyangga yang sangat bertumpuk.

1 const ThemeContext = React.createContext();

Bagian 4: Fitur Lanjutan

21. Gunakan useRef untuk nilai-nilai yang abadi

Hindari rendering ulang dengan menggunakan nilai seperti timer atau referensi DOM useRef.

1 const interval = useRef(null);

22. Menerapkan pemisahan kode React.Suspense

Memuat komponen secara dinamis untuk mengurangi ukuran paket awal.

1 const Dashboard = lazy(() => import('./Dashboard'));

23. Aktifkan React.StrictMode periode pengembangan

Identifikasi metode siklus hidup yang tidak aman atau API yang tidak digunakan lagi StrictMode.

1 <React.StrictMode>
2   <App />
3 </React.StrictMode>

Bagian 5: Praktik Terbaik Umum

24. Usahakan negara bagian selokal mungkin

Lokalkan pengelolaan status komponen yang digabungkan secara erat untuk menghindari kerumitan yang tidak perlu.

25. Selalu tentukan nilai default untuk negara bagian

Variabel status selalu diberi nilai default.

1 const [data, setData] = useState([]);

sebagai kesimpulan

25 tips optimasi React ini akan membantu Anda menulis kode lebih cepat, lebih bersih, dan lebih mudah dipelihara. Dari mengelola status secara efisien hingga memanfaatkan fitur-fitur canggih, setiap tip merupakan sebuah langkah menuju penguasaan pengembangan React. Teruslah belajar dan bereksperimen untuk tetap menjadi yang terdepan dalam bidang yang terus berkembang ini!