REACTJS DOCS

DASAR-JSX

JSX Expression
Description: Menyisipkan ekspresi JavaScript dalam JSX.
Example: 
const name = 'Ridho'; return <h1>Hello, {name}</h1>
Output: Hello, Ridho
JSX Attribute
Description: Memberi atribut HTML/JSX (camelCase).
Example: 
<img src={avatar} alt="User" className="avatar" />
Output: Elemen <img>
Conditional Rendering
Description: Menggunakan ternary atau &&.
Example: 
return <div>{isLoggedIn ? <Dashboard /> : <Login />}</div>
Output: Komponen sesuai kondisi
List Rendering
Description: Mapping array ke JSX dengan key.
Example: 
users.map(user => <li key={user.id}>{user.name}</li>)
Output: List <li>
Fragment
Description: Mengelompokkan elemen tanpa node tambahan.
Example: 
<><ChildA /><ChildB /></>
Output: Tanpa wrapper DOM
Comments in JSX
Description: Menulis komentar di dalam JSX.
Example: 
{/* Ini komentar */}
Output: Komentar

KOMPONEN

Functional Component
Description: Komponen berbasis fungsi.
Example: 
function Greeting({ name }) { return <h1>Halo {name}</h1>; }
Output: Greeting
Props
Description: Menerima data dari parent (read-only).
Example: 
<User name="Ridho" age={25} />
Output: name='Ridho', age=25
Children Prop
Description: Menerima konten di antara tag.
Example: 
function Card({ children }) { return <div>{children}</div>; }
Output: Membungkus konten
defaultProps (optional)
Description: Nilai default properti (bisa juga destructuring default).
Example: 
function Hello({ name = 'User' }) { return <p>Hello {name}</p>; }
Output: Hello User
React.memo
Description: Mencegah render ulang jika props tidak berubah.
Example: 
const MemoComp = React.memo(MyComponent);
Output: Komponen di-memo
forwardRef
Description: Meneruskan ref ke komponen anak.
Example: 
const Input = React.forwardRef((props, ref) => <input ref={ref} />)
Output: Ref diteruskan
lazy
Description: Lazy load komponen (code splitting).
Example: 
const LazyComp = React.lazy(() => import('./Comp'));
Output: Komponen lazy
Suspense
Description: Menampilkan fallback saat lazy loading.
Example: 
<Suspense fallback={<Loader />}><LazyComp /></Suspense>
Output: Fallback muncul saat loading

HOOKS-STATE

useState
Description: State lokal komponen.
Example: 
const [count, setCount] = useState(0);
Output: count=0
useState (functional update)
Description: Update berdasarkan state sebelumnya.
Example: 
setCount(prev => prev + 1);
Output: count bertambah 1
useReducer
Description: State kompleks dengan reducer (Redux pattern).
Example: 
const [state, dispatch] = useReducer(reducer, initialState);
Output: state, dispatch
useOptimistic (React 19)
Description: Update optimistik untuk UI interaktif.
Example: 
const [optimisticMessages, addOptimistic] = useOptimistic(messages, (state, newMsg) => [...state, newMsg]);
Output: UI optimistik
useActionState (React 19)
Description: State untuk form action (sebelumnya useFormState).
Example: 
const [state, formAction] = useActionState(action, initialState);
Output: State form action

HOOKS-EFFECT

useEffect
Description: Efek samping setelah render (data fetching, subscription).
Example: 
useEffect(() => { document.title = count; }, [count]);
Output: Judul berubah
useLayoutEffect
Description: Efek yang berjalan setelah DOM siap, sinkron.
Example: 
useLayoutEffect(() => { measure(); }, []);
Output: Diukur sebelum paint
useInsertionEffect (React 18+)
Description: Efek untuk CSS-in-JS styling, berjalan sebelum DOM mutations.
Example: 
useInsertionEffect(() => { styleRef.current = document.createElement('style'); }, []);
Output: Style diinjeksi lebih awal

HOOKS-REF

useRef
Description: Ref yang mutable, tidak memicu render ulang.
Example: 
const inputRef = useRef(null);
Output: Referensi input DOM
useImperativeHandle
Description: Menentukan nilai yang diekspos oleh ref (dengan forwardRef).
Example: 
useImperativeHandle(ref, () => ({ focus() { inputRef.current.focus() } }));
Output: Ref kustom

HOOKS-CONTEXT

useContext
Description: Mengkonsumsi context tanpa Consumer.
Example: 
const theme = useContext(ThemeContext);
Output: Nilai context
createContext
Description: Membuat context object.
Example: 
const ThemeContext = React.createContext('light');
Output: Context
Provider
Description: Menyediakan nilai context ke komponen anak.
Example: 
<ThemeContext.Provider value="dark"><App /></ThemeContext.Provider>
Output: Anak mendapat value dark

HOOKS-PERFORMANCE

useMemo
Description: Memoize nilai (hanya hitung ulang jika dependency berubah).
Example: 
const expensive = useMemo(() => compute(a, b), [a, b]);
Output: Nilai di-cache
useCallback
Description: Memoize fungsi (menghindari rekreasi).
Example: 
const handleClick = useCallback(() => { doSomething(a); }, [a]);
Output: Fungsi stabil
useTransition (React 18)
Description: Menandai update state sebagai transisi non-urgent.
Example: 
const [isPending, startTransition] = useTransition(); startTransition(() => { setQuery(next); });
Output: UI tetap responsif
useDeferredValue (React 18)
Description: Menunda pembaruan nilai hingga komputasi selesai.
Example: 
const deferredQuery = useDeferredValue(query);
Output: Nilai tertunda

HOOKS-LAINNYA

useId (React 18)
Description: ID unik untuk aksesibilitas (SSR/hydration aman).
Example: 
const id = useId();
Output: :r0:
useDebugValue
Description: Label untuk custom hook di React DevTools.
Example: 
useDebugValue(isOnline ? 'Online' : 'Offline');
Output: Label DevTools
useSyncExternalStore (React 18)
Description: Subscribe ke store eksternal (Redux, Zustand).
Example: 
const state = useSyncExternalStore(subscribe, getSnapshot);
Output: Data store
useFormStatus (React 19)
Description: Status form (pending) untuk komponen dalam <form>.
Example: 
const { pending } = useFormStatus();
Output: true/false
use (React 19)
Description: Membaca resource seperti Promise atau context di dalam komponen (tanpa hook rules ketat).
Example: 
const data = use(fetchPromise);
Output: Data

EVENTS

onClick
Description: Handler klik.
Example: 
<button onClick={() => alert('Hello')}>Klik</button>
Output: Alert
onChange
Description: Handler perubahan input/select/textarea.
Example: 
<input onChange={e => setName(e.target.value)} />
Output: name terupdate
onSubmit
Description: Handler submit form.
Example: 
<form onSubmit={handleSubmit}>...</form>
Output: Submit
onKeyDown
Description: Handler keyboard press.
Example: 
<input onKeyDown={e => e.key === 'Enter' && search()} />
Output: Enter trigger search
preventDefault
Description: Mencegah perilaku default event.
Example: 
e.preventDefault();
Output: Aksi default dibatalkan
stopPropagation
Description: Menghentikan propagasi event.
Example: 
e.stopPropagation();
Output: Parent tidak menerima event
SyntheticEvent
Description: React membungkus event asli (cross-browser).
Example: 
onClick = (event: React.MouseEvent<HTMLButtonElement>) => {}
Output: Event React

FORMULIR

Controlled Component
Description: Nilai input dikendalikan oleh state React.
Example: 
<input value={name} onChange={e => setName(e.target.value)} />
Output: Input terkontrol
Uncontrolled Component
Description: Nilai input diakses via ref (tidak di-state).
Example: 
const inputRef = useRef(); <input ref={inputRef} />
Output: inputRef.current.value
Form Action (React 19)
Description: Mengirim form menggunakan action (bisa server action).
Example: 
<form action={async (formData) => { await save(formData); }}>
Output: Submit server action

SERVER-COMPONENTS

"use client"
Description: Direktif untuk Client Component (interactive).
Example: 
'use client'; function LikeButton() { ... }
Output: Client Component
"use server"
Description: Direktif untuk Server Action (mutasi data di server).
Example: 
'use server'; async function deletePost(id) { ... }
Output: Server Action
React Server Component
Description: Komponen yang dirender di server (tidak ada state/effect).
Example: 
export default async function ServerComp() { const data = await fetch(...); return <div>{data}</div>; }
Output: Rendered di server

RENDERING

createRoot (React 18)
Description: Root untuk rendering aplikasi React.
Example: 
import { createRoot } from 'react-dom/client'; createRoot(document.getElementById('root')).render(<App />);
Output: App ter-render
hydrateRoot (React 18)
Description: Hydrate aplikasi SSR.
Example: 
hydrateRoot(document.getElementById('root'), <App />);
Output: Aplikasi terhidrasi
StrictMode
Description: Membantu mendeteksi masalah dengan rendering ganda di development.
Example: 
<StrictMode><App /></StrictMode>
Output: Double render dev

PORTAL

createPortal
Description: Merender komponen di luar hirarki DOM.
Example: 
createPortal(<Modal />, document.getElementById('modal-root'));
Output: Modal di luar root

LAINNYA

Profiler
Description: Mengukur performa render.
Example: 
<Profiler id="App" onRender={callback}><App /></Profiler>
Output: Data performa
cloneElement
Description: Mengkloning elemen dengan props baru (jarang digunakan).
Example: 
React.cloneElement(child, { newProp: true });
Output: Elemen baru
isValidElement
Description: Cek apakah sebuah objek adalah elemen React.
Example: 
React.isValidElement(<div />);
Output: true
Children utilities
Description: Memanipulasi children (Children.map, toArray).
Example: 
React.Children.map(children, child => cloneElement(child, { extra: true }));
Output: Array child yang dimodifikasi

CUSTOM-HOOKS

Custom Hook
Description: Fungsi yang menggunakan hook lain (nama diawali use).
Example: 
function useOnlineStatus() { const [online, setOnline] = useState(navigator.onLine); useEffect(() => { ... }, []); return online; }
Output: Status online

TESTING

act (from react-dom/test-utils)
Description: Membungkus kode yang memicu update state agar test bisa menunggu selesai.
Example: 
await act(async () => { render(<App />); });
Output: Render selesai