ReactJS Cheatsheet: Your Ultimate Guide to Modern React Development

React has evolved rapidly—from class components to hooks, from client-side rendering to server components. Whether you're a beginner or a seasoned developer, having a compact cheatsheet can save hours of Googling and debugging. This guide by CodeClash distills the essentials of React into digestible, actionable snippets

🚀 Getting Started:

Start with the basics:

import React from 'react';

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

Tip: Wrap your root component in <React.StrictMode> during development to catch potential issues early.

⚛️ JSX:

JSX is a syntax extension that looks like HTML but compiles to React.createElement() calls.

• Embed expressions like {1 + 2} or {props.name}

• Must return a single parent element—use fragments (<>...</>) when needed

🧱 Components & Props:

React apps are built from components.

• Functional Components are preferred for simplicity and performance

• Use destructuring for cleaner props handling

• Set default props to avoid undefined errors

• Pass children to make components flexible

• Use PropTypes for runtime type checking

🎣 React Hooks:

Hooks bring state and lifecycle features to functional components:

useStateManage local state

useEffectHandle side effects like API calls

useContextShare global data without prop drilling

useRefAccess DOM nodes or persist values

useReducerManage complex state logic

useMemo / useCallbackOptimize performance by memoizing values/functions

useIdGenerate consistent unique IDs

useTransition / useDeferredValueImprove responsiveness for non-urgent updates

useSyncExternalStoreSubscribe to external stores safely

useLayoutEffect / useInsertionEffectControl DOM mutations and style injection

🧠 Event Handling:

React uses Synthetic Events for cross-browser consistency.

• Use onClick, onChange, etc.

• Access event object via (e) => e.target.value

• Prevent default behavior with e.preventDefault()

🔀 Conditional Rendering:

• Ternary: {isLoggedIn ? <Dashboard /> : <Login />}

• Logical AND: {isOnline && <span>Online</span>}

• if-else inside functions for more control

📋 Lists & Keys:

Render lists with .map() and assign unique key props. Avoid using array indices unless the list is static.

📝 Forms & Inputs:

• Controlled Components: Bind input value to state

• Uncontrolled Components: Use ref for direct access

• Use libraries like Formik or React Hook Form for complex forms

🎨 Styling:

Choose your flavor:

• Inline styles: { style: { color: 'red' } }

• CSS Modules: import styles from './App.module.css'

• Styled Components: const Button = styled.button``...``;

• Tailwind CSS: Utility-first classes like "bg-blue-500"

🧭 Routing (React Router v6):

Set up routes with:

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

<BrowserRouter>

<Routes>

<Route path="/about" element={<About />} />

</Routes>

</BrowserRouter>

Use useNavigate and useParams for navigation and dynamic routing.

🔄 State Management:

• Context API: Lightweight global state

• Redux Toolkit: Slices, actions, reducers, DevTools

• Zustand, Jotai, Recoil: Modern alternatives with minimal boilerplate

⚡ Performance Optimization:

• Use React.memo to prevent unnecessary re-renders

• Memoize values/functions with useMemo and useCallback

• Lazy load components with React.lazy() and <Suspense>

🧪 Testing:

• Unit Testing: React Testing Library + Jest

• Integration Testing: Simulate user interactions

• E2E Testing: Use Cypress or Playwright for full workflows

🛑 Error Boundaries & Portals:

• Use class components for error boundaries

• Use ReactDOM.createPortal() for modals and tooltips

🧃 React 18+ Features:

• startTransition: Mark updates as non-urgent

• Automatic Batching: Multiple state updates are batched

• React Server Components (RSC): Used in frameworks like Next.js

🚀 Deployment & Ecosystem:

• Build with npm run build

• Host on Vercel, Netlify, or GitHub Pages

• Use .env files for environment variables

• Tools: React DevTools, Redux DevTools, ESLint + Prettier

🏁 Final Thoughts:

React is more than a library—it’s an ecosystem. Mastering its core concepts, hooks, and performance patterns will help you build scalable, maintainable apps. And with React 18 and server components, the future is even more exciting.