React Cheatsheet

Quick reference for React basics — components, hooks, state, and patterns.

Components

Concept	Description
Function component	`function App() {}` — preferred in modern React
Arrow component	`const App = () => {}` — concise alternative
JSX	`<div>{expr}</div>` — JavaScript expressions inside curly braces
Fragment	`<>...</>` — grouping without extra DOM node
Children prop	`{ children }` — compose components together

Hooks

// useState
const [count, setCount] = useState<number>(0);

// useEffect — mount, update, cleanup
useEffect(() => {
  const id = setInterval(() => setCount(c => c + 1), 1000);
  return () => clearInterval(id);
}, []);

// useRef — mutable ref or DOM access
const inputRef = useRef<HTMLInputElement>(null);

// useMemo — memoize expensive computation
const sorted = useMemo(() => items.sort(), [items]);

// useCallback — stable function reference
const handler = useCallback((id: string) => select(id), [select]);

// useReducer — complex state logic
const [state, dispatch] = useReducer(reducer, initialState);

State & Props

// Props with TypeScript
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
}

function Button({ label, onClick, variant = "primary" }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

// Lifting state up
function Parent() {
  const [value, setValue] = useState("");
  return <Child value={value} onChange={setValue} />;
}

Event Handling

// Click handler
<button onClick={() => setCount(c => c + 1)}>Click</button>

// Form submission
<form onSubmit={(e) => {
  e.preventDefault();
  handleSubmit();
}}>

// Input change
<input
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

Lists & Conditional Rendering

// Rendering lists
<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

// Conditional rendering
{isLoggedIn ? <Dashboard /> : <Login />}
{error && <ErrorMessage>{error}</ErrorMessage>}

Context & Custom Hooks

// Creating context
const ThemeContext = createContext<"light" | "dark">("light");

// Provider
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// Consuming context
const theme = useContext(ThemeContext);

// Custom hook
function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initial;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue] as const;
}