Frontend Framework

Updated for 2026

React Cheatsheet & Component Cheat Sheet

Ultimate React cheatsheet and development hooks cheat sheet. Master core state management, side effects, Context API providers, and memoization hacks.

Target Version Compatibility

Interactive Skill Mastery

Mark commands as learned to build your customized reference tracker. Retained locally in this browser.

Level:Novice

Command Mastery Progress0 of 17 Mastered (0%)

Core Hooks

const [state, setState] = useState(initialValue);

BeginnerBasics

Maintain local interactive state variables within a functional component.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const [state, setState] = useState(initialValue);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

useEffect(() => {\n console.log("Mounted");\n return () => console.log("Unmounted");\n}, [deps]);

IntermediateDebugging

Execute side-effects in your component with custom dependencies and component unmount cleanup callback.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

useEffect(() => {\n  console.log("Mounted");\n  return () => console.log("Unmounted");\n}, [deps]);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const ref = useRef(null);

BeginnerBasics

Reference DOM elements directly or persist mutable values across re-renders without triggering a paint update.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const ref = useRef(null);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const [state, dispatch] = useReducer(reducer, initialState);

AdvancedPerformance

Manage complex component states using a standard action dispatch flow instead of nested useState hooks.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const [state, dispatch] = useReducer(reducer, initialState);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

useLayoutEffect(() => {\n // Measure DOM before screen paint\n}, []);

BeginnerBasics

Synchronously execute side effects after all DOM mutations but before browser paint cycles.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

useLayoutEffect(() => {\n  // Measure DOM before screen paint\n}, []);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const state = useSyncExternalStore(subscribe, getSnapshot);

BeginnerBasics

Subscribe to external third-party micro-state stores with strict hydration and tearing safety protections built-in.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const state = useSyncExternalStore(subscribe, getSnapshot);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

Custom Hooks

function useWindowWidth() {\n const [width, setWidth] = useState(window.innerWidth);\n // ... subscribe to resize events\n return width;\n}

BeginnerBasics

Construct a custom reusable hook to share stateful logic across multiple components.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

function useWindowWidth() {\n  const [width, setWidth] = useState(window.innerWidth);\n  // ... subscribe to resize events\n  return width;\n}

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const id = useId();

BeginnerBasics

Generate unique stable identifier string IDs for wiring up accessible HTML elements securely.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const id = useId();

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

Context API

const ThemeContext = createContext("light");\n// ...\nconst currentTheme = useContext(ThemeContext);

BeginnerBasics

Create and consume global context providers, bypass drilling props through hierarchies.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const ThemeContext = createContext("light");\n// ...\nconst currentTheme = useContext(ThemeContext);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

Component Structure

const MyComponent: React.FC<Props> = ({ title, children }) => {\n return <h1>{title}</h1>;\n};

BeginnerBasics

Standard React Functional Component typed with TypeScript properties and children support.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const MyComponent: React.FC<Props> = ({ title, children }) => {\n  return <h1>{title}</h1>;\n};

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const LazyComp = React.lazy(() => import("./LazyComp"));

BeginnerBasics

Lazy load a child component to split bundles and optimize initial page load performance.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const LazyComp = React.lazy(() => import("./LazyComp"));

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

useImperativeHandle(ref, () => ({\n focus: () => { inputRef.current.focus(); }\n}));

BeginnerBasics

Customize the public handle instance exposed to parent components when utilizing React.forwardRef.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

useImperativeHandle(ref, () => ({\n  focus: () => { inputRef.current.focus(); }\n}));

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

Performance

const memoizedValue = useMemo(() => computeValue(a, b), [a, b]);

AdvancedPerformance

Cache high-overhead calculations to prevent recalculations on every re-render.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const memoizedValue = useMemo(() => computeValue(a, b), [a, b]);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const memoizedCallback = useCallback(() => handleClick(id), [id]);

AdvancedPerformance

Cache callback references to avoid unnecessary re-renders of performance-critical child components.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const memoizedCallback = useCallback(() => handleClick(id), [id]);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

export default React.memo(MyComponent);

AdvancedPerformance

Wrap visual components to prevent unnecessary re-rendering if input props remain unchanged.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

export default React.memo(MyComponent);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const [isPending, startTransition] = useTransition();

AdvancedPerformance

De-prioritize expensive state updates as transitions to keep the interface smooth and fully responsive during large paints.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const [isPending, startTransition] = useTransition();

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

const deferredValue = useDeferredValue(value);

AdvancedPerformance

Defer updating a specific state slice during heavy paint computations to prevent UI stuttering.

When to Use

When developing interactive web user interfaces, functional components, or stateful client-side logic states.

Common Mistakes

Mutating local React states directly rather than using standard hooks setter triggers, or skipping dependencies in arrays.

Shortcut / Pro-Tip

Always keep state objects modular and cleanly separate your side-effects to preserve quick Virtual DOM rendering cycles.

Example

const deferredValue = useDeferredValue(value);

Output Example

Console / Terminal

Component mounted successfully, updating active DOM node branches in the browsers.

React Best Practices

1Optimize Re-renders with useMemo

Wrap compute-heavy calculations inside useMemo hooks to bypass repeating calculations on every component paint cycle.

2Provide Explicit Dependency Arrays

Never leave dependency arrays blank unless you want effects to run on every render. Use primitive values in arrays to prevent infinite render loops.

3Adopt Functional Component Patterns

Stick strictly to functional components and React Hooks, ensuring maximum efficiency, clean state management, and lifecycle handling.

4Abstract Logic into Custom Hooks

Keep visual components highly readable by extracting complex state logic, subscriptions, or async tasks into custom hooks.

5Manage Keys on Dynamic Lists Rigorously

Always apply unique, persistent keys (never random values or array index counts if list ordering is dynamic) to list loops so React can reconcile DOM tree nodes.

Common React Errors & Solutions

Error

Too many re-renders. React limits the number of renders

Solution

You are setting state directly within your component rendering body. Move state updates inside useEffect or standard event handlers.

Error

React Hooks must be called in the exact same order

Solution

Ensure hooks are only declared at the top-level of functional components. Never put hooks inside conditions, loops, or nested functions.

Error

State update is not reflected immediately

Solution

React state setters are asynchronous. Access the updated value by passing a functional updater (prev => prev + 1) or inside a useEffect tracking the state.

Error

Can't perform a React state update on an unmounted component

Solution

Cancel any active asynchronous fetches, timers, or subscriptions within the useEffect cleanup function.

Error

Props read-only violation error

Solution

Props are completely immutable. If values need to change, trigger parent callbacks to update the state variable inside the parent component.

Common React Interview Questions

Q1What are React Hooks and what rules must they follow?

Hooks are functions that let functional components manage state and side effects. Rules: 1. Only call hooks at the top level of your component (never inside loops, conditions, or nested functions). 2. Only call hooks from React functional components or custom hooks.

Q2What is the purpose of useEffect, and how does the cleanup function work?

useEffect handles side effects (APIs, subscriptions, manual DOM edits). The returned cleanup function runs right before the component unmounts or before the effect runs again, letting you clear timers and subscriptions.

Q3What is React Virtual DOM and how does reconciliation work?

The Virtual DOM is an in-memory representation of the real DOM. When state changes, React builds a new virtual tree, compares it with the previous one (diffing), and patches only the changed nodes in the real DOM (reconciliation).

Q4What is the difference between useMemo and useCallback?

useMemo caches and returns the computed result of an expensive calculation function. useCallback caches and returns the actual function reference itself, preventing child components from re-rendering due to fresh function instances.

Q5Explain the React Context API and its use case.

Context API provides a way to pass data down the component tree without manually passing props at every level (props drilling). It is ideal for global state setups like language, themes, or user authentications.

Related Resources

Tool

REST API Tester

Test API routes and endpoints directly in your browser with full request controls.

Tool

JSON Formatter & Validator

Beautify, validate, and minify JSON structures instantly.

Article

Best Free Online Developer Tools

An expert review of must-have online utilities for developers.

Cheatsheet

Git Cheatsheet

Essential command reference for local and remote version control repositories.