# React Comprehensive Cheatsheet ## React Core (All versions) ### JSX syntax and rules JSX is a syntax extension for JavaScript that allows you to write HTML-like structure directly within JavaScript files. It requires tags to be closed and multiple elements to be wrapped in a single parent container. ```jsx export default function JsxDemo() { const title = "Hello World"; return (

{title}

JSX expressions use curly braces.

); } ``` ### Components (functional and class) Functional components are JavaScript functions that return JSX, while Class components extend `React.Component` and require a `render()` method. ```jsx import React from 'react'; export function FunctionalComponent() { return

I am a functional component

; } export class ClassComponent extends React.Component { render() { return

I am a class component

; } } ``` ### Props and PropTypes Props are read-only properties passed down from parent to child components, validated at runtime using the `prop-types` package. ```jsx import PropTypes from 'prop-types'; export default function UserProfile({ name, age, isActive }) { return (

{name} ({age})

Status: {isActive ? 'Active' : 'Inactive'}

); } UserProfile.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number, isActive: PropTypes.bool }; UserProfile.defaultProps = { age: 18, isActive: true }; ``` ### State with useState State represents dynamic data local to a component that can trigger re-renders when updated via its modifier function. ```jsx import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( ); } ``` ### Component lifecycle (class-based) Class components manage side effects and state transitions via distinct mounting, updating, and unmounting execution hooks. ```jsx import React from 'react'; export default class LifecycleDemo extends React.Component { componentDidMount() { console.log('Component rendered to DOM'); } componentDidUpdate(prevProps, prevState) { console.log('Component updated', prevProps, prevState); } componentWillUnmount() { console.log('Component about to be destroyed'); } render() { return

Check console for logs

; } } ``` ### Event handling React handles events using camelCase naming conventions and synthetic event wrappers rather than standard native DOM names. ```jsx export default function EventButton() { const handleClick = (e) => { e.preventDefault(); alert('Button clicked!'); }; return ; } ``` ### Conditional rendering Conditional rendering displays specific JSX nodes based on runtime evaluations using JavaScript logical operators or ternary expressions. ```jsx export default function AuthStatus({ isLoggedIn }) { return (

{isLoggedIn ?

Welcome back, User!

Please log in.

} {isLoggedIn && }

); } ``` ### Lists and keys Lists of components are rendered using `.map()`, requiring a unique `key` prop on elements to optimize DOM reconciliation performance. ```jsx export default function ItemList() { const items = [{ id: 'a', name: 'Apple' }, { id: 'b', name: 'Banana' }]; return (

{item.name}

); } ``` ### Forms and controlled components Controlled components tie form element values explicitly to local state updates, establishing a single source of input truth. ```jsx import { useState } from 'react'; export default function ControlledForm() { const [email, setEmail] = useState(''); return ( ); } ``` --- ## React 16 (2017) ### Error boundaries Error boundaries are class components that capture runtime errors anywhere in their child tree, preventing application crashes. ```jsx import React from 'react'; export default class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error('Error caught:', error, errorInfo); } render() { if (this.state.hasError) { return

Something went wrong.

; } return this.props.children; } } ``` ### Portals Portals render components into an isolated DOM node residing completely outside the parent component's structural hierarchy. ```jsx import ReactDOM from 'react-dom'; export default function ModalPortal({ children, isOpen }) { if (!isOpen) return null; return ReactDOM.createPortal(

{children}

, document.getElementById('modal-root') ); } ``` ### Fragments Fragments permit components to return adjacent sibling items without creating unnecessary wrapping DOM nodes. ```jsx import { Fragment } from 'react'; export default function SiblingList() { return (

First Element

Second Element

); } ``` ### Return arrays and strings from render Components can natively return lists of strings or raw element arrays from render blocks without a wrapper node. ```jsx import React from 'react'; export class ArrayAndStringRender extends React.Component { render() { return [

First Item

Second Item

]; } } ``` ### createRef `createRef` initializes a reactive container inside class components to directly bind and interact with native DOM references. ```jsx import React from 'react'; export default class FocusInput extends React.Component { inputRef = React.createRef(); focusInputField = () => { this.inputRef.current.focus(); }; render() { return (

); } } ``` --- ## React 16.3 (2018) ### New Context API (createContext, Provider, Consumer) Provides a global state-sharing framework that transfers data across components without using manual prop drilling down trees. ```jsx import React from 'react'; const ThemeContext = React.createContext('light'); export function App() { return ( ); } function Toolbar() { return ( {theme =>

Current Application Theme: {theme}

} ); } ``` ### New lifecycle methods (getDerivedStateFromProps, getSnapshotBeforeUpdate) Safer alternatives added to compute state modifications from incoming props or track physical DOM conditions right before redraw mutations. ```jsx import React from 'react'; export default class ChatList extends React.Component { listRef = React.createRef(); static getDerivedStateFromProps(props, state) { return null; } getSnapshotBeforeUpdate(prevProps, prevState) { if (prevProps.list.length < this.props.list.length) { return this.listRef.current.scrollHeight; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { if (snapshot !== null) { this.listRef.current.scrollTop += this.listRef.current.scrollHeight - snapshot; } } render() { return

{this.props.list.map((m, i) =>

{m}

)}

; } } ``` ### StrictMode A development-only tool that highlights structural anti-patterns, side effects, and deprecated method workflows within codebases. ```jsx import { StrictMode } from 'react'; export default function WrappedApp() { return ( ); } function MainDashboard() { return

Dashboard

; } ``` ### createRef and forwardRef `forwardRef` exposes internal domestic DOM nodes of child components back upward to parent container reference instances. ```jsx import React, { createRef, forwardRef } from 'react'; const CustomInput = forwardRef((props, ref) => ( )); export default function ParentRefExample() { const textInputRef = createRef(); return (

); } ``` --- ## React 16.6 (2018) ### React.memo A higher-order component that skips functional component re-renders if incoming props match past props. ```jsx import React from 'react'; const PureDisplay = React.memo(function PureDisplay({ label }) { console.log('Rendered only on label change'); return

Label: {label}

; }); export default PureDisplay; ``` ### React.lazy and Suspense (code splitting) Enables dynamic asynchronous loading of targeted bundle imports, managing loading feedback placeholders while resolving chunks. ```jsx import React, { lazy, Suspense } from 'react'; const LazyHeavyWidget = lazy(() => import('./HeavyWidget')); export default function SpeedApp() { return (

Loading app widget bundle...

}> ); } ``` ### contextType A shortcut class property allowing simple consumption of a specific context provider instance directly inside class instances. ```jsx import React from 'react'; const UserSettingsContext = React.createContext({ lang: 'en' }); export default class LanguagePanel extends React.Component { static contextType = UserSettingsContext; render() { return

Active Language Code: {this.context.lang}

; } } ``` --- ## React 16.8 (2019) — Hooks ### useState Declares state variables inside lightweight functional components without using formal class state wrappers. ```jsx import { useState } from 'react'; export default function TextInput() { const [text, setText] = useState(''); return setText(e.target.value)} />; } ``` ### useEffect (with dependency array patterns) Performs imperative external side effects, managing mount, variable updating, and cleanups within dependency configurations. ```jsx import { useState, useEffect } from 'react'; export default function SyncDocumentTitle() { const [name, setName] = useState('User'); useEffect(() => { document.title = `Profile: ${name}`; return () => { document.title = 'React App'; }; }, [name]); return setName(e.target.value)} />; } ``` ### useContext Reads Context subscription structures immediately inside scope, ignoring deep element hierarchies or rendering intermediaries. ```jsx import { createContext, useContext } from 'react'; const StyleContext = createContext({ color: 'blue' }); export default function NestedBox() { const config = useContext(StyleContext); return

Applied styling color

; } ``` ### useReducer Manages multi-tier composite state records using dispatch vectors matching standardized state-reducer action mechanics. ```jsx import { useReducer } from 'react'; function countReducer(state, action) { switch (action.type) { case 'inc': return { count: state.count + 1 }; default: return state; } } export default function ReducerCounter() { const [state, dispatch] = useReducer(countReducer, { count: 0 }); return ; } ``` ### useCallback Caches inline function definitions between renders to prevent breaking reference equality on downstream child components. ```jsx import { useState, useCallback } from 'react'; export default function ActionDispatcher() { const [val, setVal] = useState(0); const triggerAction = useCallback(() => { console.log('Action triggered on val:', val); }, [val]); return ; } ``` ### useMemo Caches the computed result of expensive data calculations between renders, re-evaluating only when dependencies change. ```jsx import { useState, useMemo } from 'react'; export default function ListMath() { const [nums] = useState([1, 2, 3, 4, 5]); const [trigger, setTrigger] = useState(false); const calculatedTotal = useMemo(() => { return nums.reduce((acc, curr) => acc + curr, 0); }, [nums]); return ; } ``` ### useRef Maintains persistent mutable object references that survive successive functional component redraws without firing render alerts. ```jsx import { useRef } from 'react'; export default function TimerRef() { const actionCounter = useRef(0); const registerClick = () => { actionCounter.current += 1; console.log('Total safe clicks tracked:', actionCounter.current); }; return ; } ``` ### useLayoutEffect Fires synchronously after all DOM alterations but before browser paintings, making it ideal for immediate layout measurements. ```jsx import { useState, useLayoutEffect, useRef } from 'react'; export default function MeasureElement() { const [height, setHeight] = useState(0); const elementBox = useRef(); useLayoutEffect(() => { setHeight(elementBox.current.getBoundingClientRect().height); }, []); return

Tracked height element box height: {height}px

; } ``` ### useImperativeHandle Customizes the public instance interface methods exposed when a parent component handles a child forward-referenced hook object. ```jsx import { useRef, useImperativeHandle, forwardRef } from 'react'; const CustomTerminal = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ clearScreen() { console.log('Terminal Cleared'); } })); return

;
});

export default function Controller() {
  const termRef = useRef();
  return <button onClick={() => termRef.current.clearScreen()}>Wipe Terminal</button>;
}

```

### Custom hooks pattern

Abstracts repetitive component logic into reusable functions that encapsulate multiple internal hook orchestrations.

```ts
import { useState, useEffect } from 'react';

export function useWindowWidth(): number {
  const [width, setWidth] = useState<number>(window.innerWidth);

useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

return width;
}

```

---

## React 17 (2020)

### No new features for developers

React 17 focused primarily on making it easier to upgrade React itself by improving underlying foundation systems.

```jsx
export default function React17Note() {
  return <p>React 17 introduced no major developer features; it focused on stability.</p>;
}

```

### Event delegation changes

Event listeners attach internally directly onto target root DOM injection points rather than attaching straight to document roots.

```jsx
// No code changes required. Under the hood change:
// React 16: document.addEventListener('click', ...)
// React 17: rootNode.addEventListener('click', ...)
export default function DelegationNotice() {
  return <div>Event tracking happens safely nested under application root.</div>;
}

```

### JSX transform (no need to import React)

New production compilers inject custom compilation execution assets implicitly, eliminating the need to explicitly include React imports.

```jsx
// Look Ma! No "import React from 'react'" needed anymore!
export function ModernJsxComponent() {
  return <h1>Clean automatic global transform output</h1>;
}

```

---

## React 18 (2022)

### createRoot (new root API)

Replaces the legacy mounting pipeline with concurrent execution options.

```tsx
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
}

```

### Automatic batching

Groups state updates across async blocks, fetch requests, and native events into a single re-render loop.

```jsx
import { useState } from 'react';

export default function BatchExample() {
  const [stateA, setStateA] = useState(0);
  const [stateB, setStateB] = useState(0);

const clickAsyncHandler = () => {
    setTimeout(() => {
      setStateA(a => a + 1);
      setStateB(b => b + 1); // Causes exactly 1 unified render cycle.
    }, 100);
  };

return <button onClick={clickAsyncHandler}>{stateA} - {stateB}</button>;
}

```

### Transitions (useTransition, startTransition)

Marks non-urgent UI updates as interruptible transitions, keeping the user interface responsive during heavy UI changes.

```jsx
import { useState, useTransition } from 'react';

export default function SearchDashboard() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

const handleInput = (e) => {
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

return <input type="text" onChange={handleInput} />;
}

```

### useDeferredValue

Defers re-rendering non-critical parts of the UI tree, similar to debouncing, to maintain input responsiveness.

```jsx
import { useState, useDeferredValue } from 'react';

export default function HeavyListing({ query }) {
  const deferredQuery = useDeferredValue(query);
  return <div>Rendering matching records for: {deferredQuery}</div>;
}

```

### useId

Generates unique, deterministic identifiers that match across both client and server runtime environments.

```jsx
import { useId } from 'react';

export default function AccessibleField() {
  const generatedId = useId();
  return (
    <div>
      <label htmlFor={generatedId}>Email Address</label>
      <input id={generatedId} type="email" />
    </div>
  );
}

```

### Suspense improvements

Standardizes data loading states across streaming server architectures and concurrent loading sequences.

```jsx
import { Suspense } from 'react';
import DataView from './DataView';

export default function SuspenseFrame() {
  return (
    <Suspense fallback={<h1>Streaming records...</h1>}>
      <DataView />
    </Suspense>
  );
}

```

### Concurrent rendering concepts

Allows rendering processes to be paused, resumed, or abandoned in the background to ensure high frame rate responses.

```jsx
// Conceptual: React coordinates non-blocking renders behind the scenes.
export default function ConcurrentInfo() {
  return <p>UI updates render smoothly without freezing the main execution thread.</p>;
}

```

### useInsertionEffect

Fires before layout effects run to inject dynamic CSS style tags into the DOM for CSS-in-JS libraries.

```jsx
import { useInsertionEffect } from 'react';

export default function InjectedButton() {
  useInsertionEffect(() => {
    const styleTag = document.createElement('style');
    styleTag.innerHTML = '.dynamic-btn { background: purple; color: white; }';
    document.head.appendChild(styleTag);
  }, []);

return <button className="dynamic-btn">Styled Box</button>;
}

```

---

## React 19 (2024)

### Actions (async functions in transitions)

Passing asynchronous actions directly into pending transitions enables automated handling of loading states, errors, and resets.

```jsx
import { useState, useTransition } from 'react';

export default function SaveSettings() {
  const [isPending, startTransition] = useTransition();

const handleAction = () => {
    startTransition(async () => {
      await fetch('/api/save');
    });
  };

return <button onClick={handleAction} disabled={isPending}>Save changes</button>;
}

```

### useActionState

Tracks processing steps, error logs, and result values directly from formal form execution actions.

```jsx
import { useActionState } from 'react';

async function updateProfile(prevState, formData) {
  return { success: true, message: "Profile Saved" };
}

export default function ProfileForm() {
  const [state, formAction, isPending] = useActionState(updateProfile, null);

return (
    <form action={formAction}>
      <button type="submit" disabled={isPending}>Submit Update</button>
      {state && <p>{state.message}</p>}
    </form>
  );
}

```

### useFormStatus

Accesses parent form state properties, including pending status and submission data, from nested child components.

```jsx
import { useFormStatus } from 'react-dom';

export default function NestedSubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? 'Sending...' : 'Complete'}</button>;
}

```

### useOptimistic

Displays expected state outcomes instantly during asynchronous background updates to improve perceived interface speed.

```jsx
import { useOptimistic } from 'react';

export default function MessageList({ currentMessages }) {
  const [optimisticMessages, setOptimistic] = useOptimistic(
    currentMessages,
    (state, newMsg) => [...state, { text: newMsg, sending: true }]
  );

return (
    <div>
      {optimisticMessages.map((m, i) => <p key={i}>{m.text} {m.sending && '(sending...)'}</p>)}
    </div>
  );
}

```

### use() hook

Reads data streams from promises or resolves context inline within loops and conditional blocks.

```jsx
import { use } from 'react';

export default function WeatherWidget({ dataPromise }) {
  const weatherReport = use(dataPromise);
  return <div>Forecast: {weatherReport.summary}</div>;
}

```

### Server components basics

Renders components natively on the server environment to optimize data loading performance and reduce bundle sizes.

```jsx
// Default environment in React 19 framework paradigms (Server Component)
export default async function ServerComponent() {
  const items = await db.query('SELECT * FROM items');
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.title}</li>)}
    </ul>
  );
}

```

### ref as a prop (no more forwardRef needed)

Passes component element DOM refs directly via standard property definitions without wrapping components in `forwardRef`.

```jsx
export function CustomFieldInput({ label, ref }) {
  return (
    <label>
      {label}
      <input ref={ref} />
    </label>
  );
}

```

### Document metadata support (title, meta tags natively)

Declares page meta-headers inline inside local layouts; React handles deduplication and injects them into the document head automatically.

```jsx
export default function BlogPost() {
  return (
    <article>
      <title>Exploring React 19 Features</title>
      <meta name="description" content="Deep dive into modern react tools" />
      <h1>Welcome To The Future</h1>
    </article>
  );
}

```

### Asset loading APIs (preload, preinit)

Preloads critical scripts, images, style documents, or asset resources to speed up page rendering.

```jsx
import { preload, preinit } from 'react-dom';

export default function OptimisedRoute() {
  preload('/fonts/inter.woff2', { as: 'font' });
  preinit('/scripts/analytics.js', { as: 'script' });
  return <div>Assets preloaded in background thread...</div>;
}

```

---

## Performance Patterns

### React.memo with custom comparison

Customizes render behavior by passing a predicate check function to determine whether property records match.

```jsx
import React from 'react';

function identicalCheck(prevProps, nextProps) {
  return prevProps.item.uuid === nextProps.item.uuid;
}

const FastRow = React.memo(({ item }) => {
  return <div>{item.title}</div>;
}, identicalCheck);

export default FastRow;

```

### useMemo vs useCallback — when to use which

`useMemo` caches values computed from expensive calculations, whereas `useCallback` caches function references to prevent child re-renders.

```tsx
import { useMemo, useCallback } from 'react';

export default function MemoizedDemo({ items, onSelect }: { items: string[], onSelect: (val: string) => void }) {
  const sortedCollection = useMemo(() => [...items].sort(), [items]);
  const selectionHandler = useCallback((value: string) => onSelect(value), [onSelect]);

return <div onClick={() => selectionHandler(sortedCollection[0])}>Process Content</div>;
}

```

### Lazy loading components

Improves initial page load times by dynamic importing and splitting source modules into lazy chunks.

```jsx
import { lazy, Suspense } from 'react';
const LazyGraph = lazy(() => import('./DataGraph'));

export default function Viewport() {
  return (
    <Suspense fallback={<div>Generating graphs...</div>}>
      <LazyGraph />
    </Suspense>
  );
}

```

### Virtualization concept

Renders only the currently visible row elements within a large dataset viewport list to minimize DOM overhead.

```jsx
// Conceptual baseline engine loop showing viewport layout indexing
export default function VirtualList({ listData, visibleWindowHeight, itemHeight }) {
  const visibleCount = Math.ceil(visibleWindowHeight / itemHeight);
  const visibleItems = listData.slice(0, visibleCount);

return (
    <div style={{ height: listData.length * itemHeight, position: 'relative' }}>
      {visibleItems.map((item, idx) => (
        <div key={item.id} style={{ transform: `translateY(${idx * itemHeight}px)`, position: 'absolute' }}>
          {item.text}
        </div>
      ))}
    </div>
  );
}

```

---

## Common Patterns

### Compound components

A pattern where a group of related components work together through a shared internal context to manage state cohesively.

```tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';

const TabsContext = createContext<{ active: string, setActive: (id: string) => void } | null>(null);

export function Tabs({ children, defaultTab }: { children: ReactNode, defaultTab: string }) {
  const [active, setActive] = useState(defaultTab);
  return <TabsContext.Provider value={{ active, setActive }}>{children}</TabsContext.Provider>;
}

Tabs.Tab = function Tab({ id, label }: { id: string, label: string }) {
  const context = useContext(TabsContext);
  return <button onClick={() => context?.setActive(id)}>{label}</button>;
};

Tabs.Panel = function Panel({ id, children }: { id: string, children: ReactNode }) {
  const context = useContext(TabsContext);
  return context?.active === id ? <div>{children}</div> : null;
};

```

### Render props

A technique for sharing runtime behavior between components by passing a rendering control function as a prop.

```tsx
import React, { useState, ReactNode } from 'react';

interface SharedProps { render: (position: { x: number; y: number }) => ReactNode }

export function Tracker({ render }: SharedProps) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })} style={{ height: '100vh' }}>
      {render(pos)}
    </div>
  );
}

```

### Higher order components

Functions that accept an existing target component definition and return an enhanced wrapper component configuration.

```tsx
import React, { ComponentType } from 'react';

export function withFeatureFlag<P extends object>(WrappedComponent: ComponentType<P>) {
  return function Protected(props: P) {
    const isAvailable = true; 
    return isAvailable ? <WrappedComponent {...props} /> : <div>Disabled</div>;
  };
}

```

### Custom hooks for API calls

Encapsulates data fetching states, loading tracking metrics, and error values into reusable hook operations.

```ts
import { useState, useEffect } from 'react';

export function useFetchData<T>(apiUrl: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);

useEffect(() => {
    fetch(apiUrl)
      .then(res => res.json())
      .then(resData => { setData(resData); setLoading(false); });
  }, [apiUrl]);

return { data, loading };
}

```

### Context + useReducer for state management

Combines context sharing pathways with structured reducer engines to provide clean global state solutions.

```tsx
import React, { createContext, useReducer, useContext, ReactNode, Dispatch } from 'react';

type Action = { type: 'login' };
const AuthStateContext = createContext<boolean>(false);
const AuthDispatchContext = createContext<Dispatch<Action> | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, dispatch] = useReducer((state: boolean, action: Action) => action.type === 'login', false);
  return (
    <AuthStateContext.Provider value={user}>
      <AuthDispatchContext.Provider value={dispatch}>{children}</AuthDispatchContext.Provider>
    </AuthStateContext.Provider>
  );
}

export const useAuth = () => [useContext(AuthStateContext), useContext(AuthDispatchContext)] as const;

```</article></body></html>

React

Exploring React Hooks: A Guide with Examples