Mengatur Kode dengan React Hooks dan Konteks

Saat mengerjakan proyek React berskala besar, sangat penting untuk memiliki basis kode yang terorganisir dengan baik untuk pemeliharaan dan skalabilitas yang lebih baik.

Pada artikel ini, kita akan mendalami praktik terbaik untuk mengatur kode sumber Anda di React, dengan fokus pada penggunaan React Hooks dan Context.

Menggunakan React Hooks untuk Manajemen Status

React Hooks adalah kumpulan fungsi yang memungkinkan Anda menggunakan status dan fitur React lainnya tanpa menggunakan kelas. Ini membantu untuk menulis kode yang lebih ringkas dan mudah dibaca. Sebagai contoh, kita dapat menggunakan useState Hook untuk mengelola state dalam sebuah komponen.

Ini contohnya:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

Kombinasi bahan

Salah satu manfaat React adalah kemampuan untuk menggunakan kembali komponen. Untuk meningkatkan organisasi, kita dapat menggunakan komponen yang lebih kecil untuk membangun komponen yang lebih besar.

Ini membantu memecah pekerjaan dan membuat kode mudah dipelihara. Misalnya, kita dapat membuat <Button> komponen untuk digunakan di banyak tempat di aplikasi kita:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

Menggunakan Konteks untuk mengelola keadaan global

Konteks adalah mekanisme dalam React yang memungkinkan kita berbagi data antar komponen anak tanpa melewati komponen induk. Ini menghindari penyampaian atribut data di beberapa level komponen dan membantu mengurangi kompleksitas kode.

Berikut adalah contoh penggunaan Konteks untuk berbagi bahasa saat ini di aplikasi:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

Di atas adalah beberapa praktik terbaik untuk mengatur kode sumber React menggunakan React Hooks and Context.