# Cheat Sheet Course: [React](https://www.devtutorials.ai/learn/react) · Section: Reference Source: https://www.devtutorials.ai/learn/react/reference/cheat-sheet > A quick reference for the whole course: TSX, components, props and state, events, forms, hooks, context, state management, routing, authentication, API integration and performance. ## How to Use This Cheat Sheet This page is a quick reference for everything in the course. Each section shows the most common patterns as short, ready-to-copy code. Use it when you know **what** you want to do but forget the exact code. Each section names the lesson where the topic is explained in full. ### Real-World Example A developer is building a bookshop page and needs the exact syntax for a controlled input or a `useEffect` cleanup. Instead of reading a full lesson again, they look it up here in a few seconds and copy the pattern. ## TSX TSX is HTML-like syntax inside TypeScript (Lesson 2). ```tsx const name = "Book Corner"; const element = ( <> {/* Fragment: no extra tag */}

{name}

{/* {} runs JavaScript */}

{/* close every tag */}

Open

{/* style is an object */} ); ``` | HTML | TSX | |---|---| | `class="x"` | `className="x"` | | `for="email"` | `htmlFor="email"` | | `onclick="..."` | `onClick={handleClick}` | | `
` | `
` | ## Components A component is a function that returns TSX. Its name starts with a capital letter (Lesson 3). ```tsx // BookCard.tsx export default function BookCard() { return

The Alchemist

; } // App.tsx import BookCard from "./BookCard"; export default function App() { return (

); } ``` ## Props & State **Props** are inputs from the parent (read-only). **State** is data a component owns and can change (Lessons 4–5). ```tsx interface BookProps { title: string; price?: number; // ? = optional children?: ReactNode; // content between the tags } function Book({ title, price = 0 }: BookProps) { // default value return

{title}: ₹{price}

; } const [count, setCount] = useState(0); // number const [books, setBooks] = useState([]); // typed array const [user, setUser] = useState(null); // maybe empty setCount(count + 1); // new value setCount((c) => c + 1); // from the previous value setBooks([...books, "Ikigai"]); // add (new array) setBooks(books.filter((b) => b !== "Ikigai")); // remove setUser({ ...user!, name: "Asha" }); // update one field ```

Props down, events up, context across.

{title}: ₹{price} ); } const books = [ { id: 1, title: "The Alchemist", price: 299 }, { id: 2, title: "Wings of Fire", price: 350 }, ]; const [cart, setCart] = useState([]); return (

setCart([...cart, t])} /> ))}

Cart: {cart.length === 0 ? "empty" : cart.join(", ")}

); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## Event Handling Patterns Pass a function, do not call it (Lesson 6). ```tsx // pass the function // with an argument function handleChange(e: ChangeEvent) { setName(e.target.value); } function handleKey(e: KeyboardEvent) { if (e.key === "Enter") search(); } function handleSubmit(e: FormEvent) { e.preventDefault(); // stop the page reload }

open()}>

``` Conditional rendering and lists (Lessons 7–8): ```tsx {isLoading &&

} {error ?

{error}

: } {books.map((b) =>

{b.title}

)} // key = stable id ``` ## Forms & Validation Templates A controlled form keeps every value in state (Lessons 9–10). ```tsx interface FormValues { email: string; password: string; } type FormErrors = Partial>; function validate(v: FormValues): FormErrors { const errors: FormErrors = {}; if (!v.email.includes("@")) errors.email = "Enter a valid email."; if (v.password.length < 8) errors.password = "Use at least 8 characters."; return errors; } const [values, setValues] = useState({ email: "", password: "" }); const [errors, setErrors] = useState({}); function handleChange(e: ChangeEvent) { setValues({ ...values, [e.target.name]: e.target.value }); // one handler } function handleSubmit(e: FormEvent) { e.preventDefault(); const found = validate(values); setErrors(found); if (Object.keys(found).length === 0) save(values); } ``` {errors.email && {errors.email}} {errors.password && {errors.password}} {done &&

Welcome!

} ); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## React Hooks Hooks are called at the top of a component, never inside `if` or loops (Lessons 11–13). ```tsx const [value, setValue] = useState(0); const [state, dispatch] = useReducer(reducer, initialState); useEffect(() => { const id = setInterval(tick, 1000); // runs after render return () => clearInterval(id); // cleanup }, []); // [] = once; [x] = when x changes const inputRef = useRef(null); inputRef.current?.focus(); const total = useMemo(() => sum(items), [items]); const handleSave = useCallback(() => save(id), [id]); const theme = useContext(ThemeContext); // a custom hook: a function starting with "use" that calls hooks function useToggle(start = false) { const [on, setOn] = useState(start); return [on, () => setOn(!on)] as const; } ```

Start with useState. Reach for the others when you need what they do.

Two rules of hooks: call them only at the top level of a component (not in `if`, loops or nested functions), and only from components or custom hooks whose names start with `use`.

Seconds: {seconds}

{" "} {" "} ); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## Context API Context shares a value with every component inside its provider (Lesson 15). ```tsx interface ThemeValue { theme: "light" | "dark"; toggle: () => void; } const ThemeContext = createContext(null); export function ThemeProvider({ children }: { children: ReactNode }) { const [theme, setTheme] = useState<"light" | "dark">("light"); const toggle = () => setTheme(theme === "light" ? "dark" : "light"); return {children}; } export function useTheme() { const ctx = useContext(ThemeContext); if (!ctx) throw new Error("useTheme must be used inside ThemeProvider"); return ctx; } // anywhere inside the provider const { theme, toggle } = useTheme(); ``` ## State Management Where should state live? (Lesson 14) | The data is used by... | Put the state in... | |---|---| | one component | `useState` in that component | | a parent and its children | the parent, passed down as props | | many parts of the app | a context (with `useReducer` if updates are complex) | | the server | fetch it, and keep a copy in state | ```tsx type Action = | { type: "added"; item: Item } | { type: "removed"; id: number }; function cartReducer(items: Item[], action: Action): Item[] { switch (action.type) { case "added": return [...items, action.item]; case "removed": return items.filter((i) => i.id !== action.id); } } const [items, dispatch] = useReducer(cartReducer, []); dispatch({ type: "added", item: book }); ``` {" "} ); } return ( ); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## Routing React Router shows a page for each URL (Lesson 16). ```tsx import { BrowserRouter, Routes, Route, Link, NavLink, useParams, useNavigate } from "react-router-dom"; } /> } /> } /> } /> const { id } = useParams(); // "/books/2" -> id is "2" (text) const navigate = useNavigate(); navigate("/books"); // go to a page in code navigate(-1); // go back ``` ## Authentication & Authorization **Authentication** checks who you are. **Authorization** checks what you may do (Lesson 17). ```tsx // after login, keep the JWT and the user in an auth context const { token, user } = useAuth(); // send the token with each request fetch(API + "/orders", { headers: { Authorization: "Bearer " + token } }); // read the payload (the middle part) of a JWT, for display only const payload = JSON.parse(atob(token.split(".")[1])); // protect a route function ProtectedRoute({ children, role }: { children: ReactNode; role?: string }) { const { user } = useAuth(); if (!user) return ; if (role && user.role !== role) return

You do not have access.

; return <>{children}; } } /> ``` Hiding a page in React is only for the user's comfort. The server must still check the token on every request, because anyone can change code in their browser.

Signed in as: {user ? user.name + " (" + user.role + ")" : "nobody"}

Home} />

Login

{" "} } />

Admin panel

} /> ); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## API Integration Fetch data with loading and error states (Lesson 22). ```tsx const [books, setBooks] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(""); useEffect(() => { async function load() { try { const response = await fetch(import.meta.env.VITE_API_URL + "/books"); if (!response.ok) throw new Error("Status " + response.status); setBooks(await response.json()); } catch { setError("Could not load books. Please try again."); } finally { setLoading(false); } } load(); }, []); // POST, PUT and DELETE await fetch(url, { method: "POST", // or "PUT" headers: { "Content-Type": "application/json" }, body: JSON.stringify(newBook), }); await fetch(url + "/" + id, { method: "DELETE" }); ``` Error boundaries for render crashes (Lesson 24): a class component with `static getDerivedStateFromError()` that renders a fallback. {books.map((b) =>

{b.title}

)} ); } `, "main.tsx": `import { createRoot } from "react-dom/client"; createRoot(document.getElementById("root")!).render(); `, }} /> ## Performance Optimization Measure first, then optimize the slow parts (Lesson 25). ```tsx const BookRow = memo(function BookRow({ book }: { book: Book }) { ... }); // skip same props const cheap = useMemo(() => books.filter((b) => b.price < 300), [books]); // keep a value const handleSelect = useCallback((id: number) => select(id), []); // keep a function const Admin = lazy(() => import("./Admin")); // code splitting Loading...

}> ``` - Keep state close to where it is used. - Use stable keys (ids, not indexes) in lists. - Test speed with a production build (`npm run build`). Easy Way to Remember: state for change, props for passing, effects for outside work, context for sharing, memo for speed. ## Common mistakes

| Mistake | What you see | Fix | |---|---|---| | Calling a handler: `onClick={save()}` | It runs on every render | Pass it: `onClick={save}` or `onClick={() => save(id)}` | | Changing state directly: `books.push(b)` | The screen does not update | Make a new array: `setBooks([...books, b])` | | No `key` in a list | A console warning, wrong rows update | Use `key={item.id}` | | Hooks inside `if` or loops | Error: rendered fewer hooks than expected | Call hooks at the top of the component | | `useEffect` without a dependency list | The effect runs after every render | Add `[]` or the values it uses | | Not checking `response.ok` | Error pages treated as data | Throw when `!response.ok` | | Trusting React to protect data | Anyone can call the API | Check tokens on the server too |

## Check Yourself ## What to Remember - Keep this page open while you build. Each section points to the lesson with the full explanation. - Props down, events up, context across. State changes go through setters, with new arrays and objects. - Fetch with `try`/`catch` and `response.ok`, protect routes but check on the server too, and optimize only what is slow.