Page cover
📋

React Cheatsheet

React

React hooks, lifecycle, component patterns, and common operations for building modern React applications

Component Basics

Functional Component

Modern React components are functions 

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function variant
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

Component with Props

TypeScript interface for type-safe props 

interface ButtonProps {
  text: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

function Button({ text, onClick, variant = 'primary' }: ButtonProps) {
  return (
    <button onClick={onClick} className={variant}>
      {text}
    </button>
  );
}

useState Hook

Basic State

Manage component state 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

State with Object

Always spread previous state for objects 

const [user, setUser] = useState({ name: '', age: 0 });

// Update specific field
setUser(prev => ({ ...prev, name: 'John' }));

// Update multiple fields
setUser(prev => ({ ...prev, name: 'John', age: 30 }));

State with Array

Common array state operations 

const [items, setItems] = useState([]);

// Add item
setItems(prev => [...prev, newItem]);

// Remove item by index
setItems(prev => prev.filter((_, i) => i !== index));

// Update item
setItems(prev => prev.map((item, i) =>
  i === index ? updatedItem : item
));

useEffect Hook

Run on Mount

Runs once when component mounts 

useEffect(() => {
  console.log('Component mounted');

  // Cleanup function (runs on unmount)
  return () => {
    console.log('Component unmounted');
  };
}, []); // Empty dependency array

Run on Dependency Change

Re-runs when dependencies change 

useEffect(() => {
  fetchData(userId);
}, [userId]); // Runs when userId changes

Data Fetching

Fetch data with cleanup 

useEffect(() => {
  let isCancelled = false;

  async function fetchUser() {
    const data = await fetch('/api/user');
    if (!isCancelled) {
      setUser(data);
    }
  }

  fetchUser();

  return () => {
    isCancelled = true; // Cleanup
  };
}, []);

useContext Hook

Create and Use Context

Share data across component tree 

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click me</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

Performance Hooks

useMemo

Memoize expensive computations 

import { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return data.map(item => expensiveOperation(item));
  }, [data]); // Only recalculate when data changes

  return <div>{processedData}</div>;
}

useCallback

Memoize callback functions 

import { useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []); // Function reference stays the same

  return <Child onClick={handleClick} />;
}

Find this helpful?

Check out more cheatsheets and learning resources, or get in touch for personalized training.

More Cheatsheets Contact Me