React Cheatsheet

Components & Props

function UserCard({ name, email }) {
  return <div><h3>{name}</h3><p>{email}</p></div>;
}

Hooks Reference

Hook	Function	Example
`useState`	Local state	`const [x, setX] = useState(0)`
`useEffect`	Side effects	`useEffect(() => {}, [deps])`
`useContext`	Access context	`const v = useContext(Ctx)`
`useRef`	DOM ref/value	`const r = useRef(null)`
`useCallback`	Cache a function	`useCallback(fn, [deps])`
`useMemo`	Cache a value	`useMemo(() => val, [deps])`
`useReducer`	Complex state	`useReducer(reducer, init)`

Custom Hooks

function useLocalStorage(key, init) {
  const [val, setVal] = useState(() => {
    const s = localStorage.getItem(key);
    return s ? JSON.parse(s) : init;
  });
  useEffect(() => localStorage.setItem(key, JSON.stringify(val)), [key, val]);
  return [val, setVal];
}

React Router

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

<BrowserRouter>
  <Link to="/">Home</Link>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Context vs Redux

Aspect	Context	Redux
Complexity	Lightweight	Heavy
Use cases	Themes, auth	Large state
DevTools	No	Yes

Best Practices

Practice	Description
Small, focused components	One responsibility
Lift state up	To the common ancestor
Use unique keys	For dynamic lists
Don't mutate state	Always create a copy
Lazy load routes	Save bundle size
Test main flows	At minimum test the critical path

Closing

Congratulations! The React tutorial is complete. Topics: Basics → Hooks → Context → Styling → Fragments → Refs → Error Boundaries → Performance → Testing → Deployment → Redux.

Keep practicing, read react.dev, and build real projects. Happy learning React!