React in 2026 is faster, cleaner, and more developer-focused than ever before.
With modern tooling like React, Vite, server components, smarter routing, and improved rendering performance, developers are building everything from SaaS products to AI platforms using React as the default frontend layer.
This React cheat sheet is built for developers who want a quick reference while working on real projects. Whether you are creating a simple UI component, handling complex state management, building APIs into your frontend, or scaling a full React Dashboard, this guide covers the core concepts used in modern production apps today.
You will learn the most important React hooks, JSX rules, routing patterns, data fetching methods, performance optimization techniques, TypeScript support, and reusable component patterns developers use daily in 2026.
If you are building:
- SaaS admin panels
- Analytics platforms
- CRM systems
- AI dashboards
- Internal business tools
- Modern React Dashboard applications
Updated React cheat sheet based on modern practices:
- Functional component architecture
- React Router v7
- SWR-based data fetching
- React lazy loading
- TypeScript-first development
- Performance optimization patterns
- Component-driven frontend architecture
Instead of long explanations, this article focuses on practical examples developers can quickly copy, understand, and apply directly inside React projects.
1. Installation
The recommended way to start a new React project is with Vite.
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run devFor TypeScript support, use .
`--template react-ts`2. Project Entry Point
Every React app starts by mounting a root component into the DOM.
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
3. Using JSX
JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. A few important rules to follow:
- Use `className` instead of `class`
- Use `htmlFor` instead of `for`
- All tags must be self-closed or have a closing tag
- A component must return a single root element
- JavaScript expressions go inside curly braces `{}`
function Greeting({ name }) {
return (
<div className="box">
<h1>Hello, {name}</h1>
</div>
)
}4. Components
A component is a JavaScript function that returns JSX. Components are the building blocks of any React application.
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>
}5. Props
Props are how data is passed from a parent component to a child component. They are read-only.
<UserCard name="Alice" age={25} isAdmin={true} />
function UserCard({ name, age, isAdmin = false }) {
return <p>{name} — {age}</p>
}
Use `children` to pass nested content between component tags.
<Card title="Welcome">
<p>This is the card body.</p>
</Card>6. useState
`useState` adds a local state to a functional component. It returns the current value and a function to update it.
const [count, setCount] = useState(0)
setCount(count + 1)
setCount(prev => prev + 1) // preferred when depending on previous value
For object or array state, always spread the previous value to avoid overwriting.
const [form, setForm] = useState({ name: '', email: '' })
setForm(prev => ({ ...prev, name: 'Alice' }))7. useEffect
`useEffect` runs side effects such as data fetching, subscriptions, or DOM changes after a component renders.
useEffect(() => {
document.title = 'Hello'
}, []) // runs once on mount
Add values to the dependency array to re-run the effect when they change. Return a cleanup function to run on unmount.
useEffect(() => {
const timer = setInterval(tick, 1000)
return () => clearInterval(timer)
}, [])8. useContext
`useContext` lets you read shared data anywhere in the component tree without passing props manually.
const ThemeContext = createContext(null)
function App() {
return (
<ThemeContext.Provider value="dark">
<Page />
</ThemeContext.Provider>
)
}
function Page() {
const theme = useContext(ThemeContext)
return <div>{theme}</div>
}9. useRef
`useRef` stores a mutable value that persists across renders without causing a re-render. It is commonly used to access DOM elements directly.
const inputRef = useRef(null)
<input ref={inputRef} />
inputRef.current.focus()10. useMemo
`useMemo` caches the result of an expensive calculation and only recalculates when its dependencies change.
const filtered = useMemo(
() => items.filter(i => i.active),
[items]
)11. useCallback
`useCallback` returns a memoized version of a function. It is useful when passing callbacks to child components that are wrapped in `React.memo`.
const handleClick = useCallback(() => {
doSomething(id)
}, [id])12. useReducer
`useReducer` is an alternative to `useState` for managing complex state logic. It follows the pattern of a reducer function that takes state and an action.
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 }
case 'reset': return { count: 0 }
default: return state
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 })
dispatch({ type: 'increment' })13. Custom Hooks
A custom hook is a function that starts with `use` and can call other hooks. It lets you extract and reuse stateful logic across components.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
const update = () => setWidth(window.innerWidth)
window.addEventListener('resize', update)
return () => window.removeEventListener('resize', update)
}, [])
return width
}14. React Router v7
React Router handles client-side navigation. Install with `npm install react-router`. The modern approach uses `createBrowserRouter`.
import { createBrowserRouter, RouterProvider } from 'react-router'
const router = createBrowserRouter([
{ path: '/', element: <Home /> },
{ path: '/about', element: <About /> },
{ path: '/user/:id', element: <User /> },
{ path: '*', element: <NotFound /> },
])
function App() {
return <RouterProvider router={router} />
}
Use built-in hooks for navigation and reading URL data.
const { id } = useParams()
const navigate = useNavigate()
navigate('/about')
navigate(-1)For nested routes, use `Outlet` in the parent layout component.
If you’re learning React & Nextjs together, our “Next.js Cheat Sheet“ helps you understand server components, file-based routing, and full-stack frontend workflows faster.
15. Data Fetching (Client-Side)
While using `useEffect` for data fetching is common for learning, modern React applications should use libraries like SWR to handle caching, loading states, and deduplication.
The basic way (with `useEffect`)
const [data, setData] = useState(null)
useEffect(() => {
let ignore = false
fetch('https://api.example.com/data')
.then(res => res.json())
.then(json => {
if (!ignore) setData(json)
})
return () => { ignore = true } // Cleanup prevents race conditions
}, [])
The modern way (with `swr`)
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then(res => res.json())
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (isLoading) return <p>Loading...</p>
if (error) return <p>An error occurred!</p>
return <h1>{data.name}</h1>
}17. Error Boundaries
Error boundaries catch rendering errors in child components and display a fallback UI. The recommended approach is the `react-error-boundary` library.
import { ErrorBoundary } from 'react-error-boundary'
<ErrorBoundary fallback={<p>Something went wrong.</p>}>
<App />
</ErrorBoundary>18. Code Splitting
`React.lazy` and `Suspense` let you load components only when they are needed, reducing the initial bundle size.
const Dashboard = lazy(() => import('./pages/Dashboard'))
<Suspense fallback={<p>Loading...</p>}>
<Dashboard />
</Suspense>19. Portals
Portals render a component outside its parent DOM node. Commonly used for modals and tooltips.
createPortal(<Modal />, document.body)
20. Fragments
Fragments let you return multiple elements without adding an extra wrapper node to the DOM.
<>
<h1>Title</h1>
<p>Description</p>
</>Use `<Fragment key={id}>` when you need to add a key inside a list.
21. Lists and Keys
Use `map` to render a list of elements. Every item must have a unique and stable `key` prop.
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}Avoid using the array index as a key when the list can be reordered or filtered.
22. Event Handling
React uses camelCase for event names. The event handler receives a synthetic event object.
function Form() {
const handleSubmit = (e) => {
e.preventDefault()
// handle form
}
return <form onSubmit={handleSubmit}>...</form>
}
Common events: `onClick`, `onChange`, `onSubmit`, `onBlur`, `onFocus`, `onKeyDown`.23. Forms
Controlled inputs store their value in state. This gives React full control over the form data.
const [email, setEmail] = useState('')
<input
type="email"
value={email}
onChange={e => setEmail(e.target.value)}
/>For complex forms in production, consider using React Hook Form (`react-hook-form`) which reduces boilerplate and handles validation efficiently.
24. Performance Optimization
`React.memo` prevents a component from re-rendering if its props have not changed.
const Card = React.memo(function Card({ title }) {
return <h2>{title}</h2>
})Use `useMemo` for expensive calculations and `useCallback` for stable function references passed to memoized children.
For very long lists, use a virtualization library such as `@tanstack/react-virtual` to render only the visible items.
25. TypeScript with React
Define a props interface for every component to get full type safety.
interface ButtonProps {
label: string
onClick?: () => void
disabled?: boolean
}
function Button({ label, onClick, disabled = false }: ButtonProps) {
return <button onClick={onClick} disabled={disabled}>{label}</button>
}
Type common hooks explicitly when the initial value is ambiguous.
const [user, setUser] = useState<User | null>(null)
const ref = useRef<HTMLInputElement>(null)
Type event handlers using React's built-in event types.
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value)
}26. Lifecycle Reference
Every class lifecycle method has a direct equivalent using hooks.
`componentDidMount` → `useEffect(() => {}, [])`
`componentDidUpdate` → `useEffect(() => {}, [dep])`
`componentWillUnmount` → return a cleanup function from `useEffect`
`shouldComponentUpdate` → `React.memo`
The following example combines all three lifecycle phases into a single effect.
useEffect(() => {
fetchData(id) // mount and update
return () => cancel() // unmount
}, [id])Wrapping Up with React Cheat Sheet
Modern React development in 2026 is less about memorizing APIs and more about understanding reusable patterns. Once you understand hooks, component composition, routing, state handling, and rendering behavior, building scalable React applications becomes much easier.
This React cheat sheet gives you a practical foundation you can revisit while building:
- React dashboards
- SaaS admin panels
- Data-heavy analytics systems
- AI interfaces
- Multi-page frontend apps
- Component libraries
The React ecosystem continues evolving, but the core ideas remain the same:
build small reusable components, keep state predictable, optimize rendering carefully, and use the right tools for scaling frontend applications.
Keep this guide bookmarked as a quick reference during development, especially when working with hooks, routing, forms, TypeScript, and performance optimization.
The more React projects you build, the more these patterns become second nature.
Leave a Reply