Developer Cheatsheets

Developer Cheatsheets

Built for developers, by XinhND

v2.1.0

Ready

React Cheat Sheet

Complete reference guide for React with interactive examples and live playground links

Basic Concepts

Component Basics

Basic component definitions and usage

React
// Function Component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Arrow Function Component
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// Using components
function App() {
  return (
    <div>
      <Welcome name="John" />
      <Welcome name="Jane" />
    </div>
  );
}

Props and State

Working with props and state

React
// Props
function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Role: {props.role}</p>
    </div>
  );
}

// State in Class Component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// State in Function Component
function Counter() {
  const [count, setCount] = useState(0);

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

Event Handling

Handling events in React components

React
// Basic event handling
function Button() {
  const handleClick = (event) => {
    console.log('Button clicked!', event);
  };

  return <button onClick={handleClick}>Click me</button>;
}

// Event with parameters
function ButtonList() {
  const handleClick = (id) => {
    console.log('Button', id, 'clicked!');
  };

  return (
    <div>
      <button onClick={() => handleClick(1)}>Button 1</button>
      <button onClick={() => handleClick(2)}>Button 2</button>
    </div>
  );
}

// Form handling
function Form() {
  const [value, setValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted:', value);
  };

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

React Hooks

useState

Managing state with useState hook

React
// Basic useState
const [count, setCount] = useState(0);

// Multiple state variables
const [name, setName] = useState('');
const [age, setAge] = useState(0);

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

// Updating object state
setUser(prevUser => ({
  ...prevUser,
  name: 'John'
}));

// Functional updates
const [count, setCount] = useState(0);
setCount(prevCount => prevCount + 1);

useEffect

Handling side effects with useEffect hook

React
// Basic effect
useEffect(() => {
  document.title = `Count: ${count}`;
});

// Effect with cleanup
useEffect(() => {
  const subscription = someAPI.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, []);

// Effect with dependencies
useEffect(() => {
  fetchUserData(userId);
}, [userId]);

// Multiple effects
useEffect(() => {
  // Effect 1
}, [dep1]);

useEffect(() => {
  // Effect 2
}, [dep2]);

useContext

Working with context using useContext hook

React
// Create context
const ThemeContext = React.createContext('light');

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

// Using context
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

// Custom context hook
function useTheme() {
  const theme = useContext(ThemeContext);
  if (theme === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return theme;
}

useReducer

State management with useReducer hook

React
// Reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Using useReducer
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

Custom Hooks

Creating and using custom hooks

React
// Custom hook for window size
function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

// Custom hook for data fetching
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

Advanced Patterns

Higher-Order Components

Creating and using Higher-Order Components

React
// HOC for authentication
function withAuth(WrappedComponent) {
  return function WithAuthComponent(props) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    useEffect(() => {
      // Check authentication
      checkAuth().then(setIsAuthenticated);
    }, []);

    if (!isAuthenticated) {
      return <div>Please log in</div>;
    }

    return <WrappedComponent {...props} />;
  };
}

// Using HOC
const ProtectedComponent = withAuth(MyComponent);

// HOC with additional props
function withData(WrappedComponent, selectData) {
  return function WithDataComponent(props) {
    const [data, setData] = useState(null);

    useEffect(() => {
      const fetchData = async () => {
        const result = await selectData();
        setData(result);
      };
      fetchData();
    }, []);

    return <WrappedComponent {...props} data={data} />;
  };
}

Render Props

Implementing render props pattern

React
// Render prop component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Using render prop
function App() {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <h1>
          Mouse position: {x}, {y}
        </h1>
      )}
    />
  );
}

// Function as children
function MouseTracker({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({
      x: event.clientX,
      y: event.clientY
    });
  };

  return (
    <div onMouseMove={handleMouseMove}>
      {children(position)}
    </div>
  );
}

Performance Optimization

Performance optimization techniques

React
// React.memo
const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

// useMemo
function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return expensiveOperation(data);
  }, [data]);

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

// useCallback
function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

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

// Code splitting
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Routing

React Router

Implementing routing with React Router

React
// Basic routing
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:id" component={UserProfile} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

// Navigation
function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/users/123">User Profile</Link>
    </nav>
  );
}

// Route parameters
function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

// Protected routes
function PrivateRoute({ children, ...rest }) {
  const auth = useAuth();
  return (
    <Route
      {...rest}
      render={({ location }) =>
        auth ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

State Management

Redux

State management with Redux

React
// Action creators
const increment = () => ({
  type: 'INCREMENT'
});

const setUser = (user) => ({
  type: 'SET_USER',
  payload: user
});

// Reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
}

// Store
const store = createStore(reducer);

// Using Redux in components
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      Count: {count}
      <button onClick={() => dispatch(increment())}>
        Increment
      </button>
    </div>
  );
}

Context API

State management with Context API

React
// Create context
const UserContext = React.createContext();

// Context provider
function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  const value = {
    user,
    setUser,
    login: (userData) => setUser(userData),
    logout: () => setUser(null)
  };

  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// Custom hook
function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

// Using context
function UserProfile() {
  const { user, logout } = useUser();

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

React - Interactive Developer Reference

Hover over code blocks to copy or run in live playground