React 19 Cheat Sheet

# Create React App (gak direkomendasi lagi)
npx create-react-app my-app
 
# Vite (recommended)
npm create vite@latest my-app -- --template react
 
# Next.js (production-ready)

// Function Component
function Welcome() {
 return <h1>Hello, World!</h1>
}
 
// Dengan props
function Welcome({ name }) {
 return <h1>Hello, {name}!</h1>
}
 
// Export

// Expression dalam JSX
const name = 'Budi'
const element = <h1>Hello, {name}</h1>
 
// Attributes
const element = <img src={imageUrl} alt

// Inline styles
<div style={{ color: 'red', fontSize: '16px' }}>Text</div>
 
// className
<div className="container">Content</div>
 
// Conditional className
<div className

function Greeting({ name, age }) {
 return (
  <div>
   <h1>Hello, {name}</h1>
   <p>Age: {age}</p>
  </div>

function Card({ children }) {
 return (
  <div className="card">
   {children}
  </div>
 )
}
 
// Usage
<Card>
 <h2>Title</h2

import { useState } from 'react'
 
function Counter() {
 const [count, setCount] = useState(0)
 
 return (
  <div>
   <p>Count: {count}</p

function Form() {
 const [name, setName] = useState('')
 const [email, setEmail] = useState('')
 const [

function UserForm() {
 const [user, setUser] = useState({
  name: '',
  email: '',
  age: 0
 })
 
 function handleChange(e) {

function TodoList() {
 const [todos, setTodos] = useState([])
 
 // Add
 function addTodo(text) {
  setTodos([...todos, { id: Date.now(), text }])

import { useEffect } from 'react'
 
function Example() {
 const [count, setCount] = useState(0)
 
 // Run setelah every render
 useEffect(() => {
  document.title 

useEffect(() => {
 const timer = setInterval(() => {
  console.log('Tick')
 }, 1000)
 
 // Cleanup function
 return () => {
  clearInterval(timer)
 }

function UserProfile({ userId }) {
 const [user, setUser] = useState(null)
 const [loading, setLoading] =

import { useRef } from 'react'
 
function TextInput() {
 const inputRef = useRef(null)
 
 function handleClick() {
  inputRef.current.focus()
 }
 

import { createContext, useContext, useState } from 'react'
 
// Create context
const ThemeContext = createContext()
 
// Provider
function App() {
 const [theme, setTheme] 

import { useReducer } from 'react'
 
function reducer(state, action) {
 switch (action.type) {
  case 'increment':
   return { count: state.count + 1 }

import { useMemo } from 'react'
 
function ExpensiveComponent({ items }) {
 // Compute heavy calculation
 const total = useMemo(() => {
  console.log('Calculating...')
  return items.reduce((

import { useCallback } from 'react'
 
function Parent() {
 const [count, setCount] = useState(0)
 
 // Memoize function
 const handleClick = useCallback(() 

import { use } from 'react'
 
// Read promise
function UserProfile({ userPromise }) {
 const user = use(userPromise)
 return <div>{user.name}</div>
}
 
// Read context

import { useActionState } from 'react'
 
function UpdateNameForm() {
 async function updateName(prevState, formData) {
  const name = formData.get(

import { useFormStatus } from 'react-dom'
 
function SubmitButton() {
 const { pending } = useFormStatus()
 
 return (
  <button disabled={pending}>
   {pending ? 'Submitting...'

import { useOptimistic } from 'react'
 
function TodoList({ todos }) {
 const [optimisticTodos, addOptimisticTodo] = useOptimistic(
  todos,
  (

// Server Component (default di Next.js App Router)
async function UserList() {
 // Fetch langsung di component
 const users = await fetch('https://api.example.com/users')
  .then(r => r.json())

// Component bisa render metadata langsung
function BlogPost({ post }) {
 return (
  <>
   <title>{post.title}</title>
   <meta name="description" content={post.excerpt} />
   <meta property

// useLocalStorage
function useLocalStorage(key, initialValue) {
 const [value, setValue] = useState(() => {
  const item = localStorage.getItem

function useFetch(url) {
 const [data, setData] = useState(null)
 const [loading, 

import { memo } from 'react'
 
// Component cuma re-render kalo props berubah
const ExpensiveComponent = memo(function ExpensiveComponent({ value }) {
 console.log('Rendering...')
 return <div>{value}</

import { lazy, Suspense } from 'react'
 
// Code splitting
const HeavyComponent = lazy(() => import('./HeavyComponent'))
 
function App() {
 return (
  <Suspense fallback={<div

import { useState, useTransition } from 'react'
 
function SearchResults() {
 const [query, setQuery] = useState('')
 const [results, setResults

import { useDeferredValue } from 'react'
 
function SearchPage({ query }) {
 const deferredQuery = useDeferredValue(query)
 
 // Results akan update dengan delay
 return <SearchResults query={deferredValue} />
}

class ErrorBoundary extends React.Component {
 constructor(props) {
  super(props)
  this.state = { hasError: false }
 }
 
 static getDerivedStateFromError(

import { createPortal } from 'react-dom'
 
function Modal({ children }) {
 return createPortal(
  <div className="modal">
   {children}
  </div>,
  document.body
 )
}

import { forwardRef } from 'react'
 
const Input = forwardRef((props, ref) => {
 return <input ref={ref} {...props} />
})
 
// Usage
function Parent

// 1. Imports
import { useState, useEffect } from 'react'
 
// 2. Component
function MyComponent({ prop1, prop2 }) {
 // 3. State
 const [state, setState] = useState(0

// Don't mutate state directly
const [items, setItems] = useState([])
items.push(newItem) // Bad!
 
// Create new array
setItems([...items, newItem])
 
// Don't call hooks conditionally
if (condition) {

// Index as key (avoid if possible)
{items.map((item, index) => (
 <div key={index}>{item}</div>
))}
 
// Unique ID as key
{items.map(item => (
 <div