React Cheat Sheet

Component Basics

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

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

// With destructuring and default props
const Welcome = ({ name = "Guest" }) => (
  <h1>Hello, {name}</h1>
);

React Hooks

useState Hook

import { useState } from 'react';

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

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

useEffect Hook

import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  // Runs after every render
  useEffect(() => {
    console.log('Component updated');
  });

  // Runs only once (on mount)
  useEffect(() => {
    fetchData().then(setData);
  }, []);

  // Runs when dependency changes
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  // Cleanup function
  useEffect(() => {
    const timer = setInterval(() => {}, 1000);
    return () => clearInterval(timer);
  }, []);
}

Common Patterns

// Conditional Rendering
{isLoggedIn ? <Dashboard /> : <Login />}
{isLoading && <Spinner />}

// Lists and Keys
{items.map(item => (
  <Item key={item.id} {...item} />
))}

// Event Handling
<button onClick={handleClick}>Click</button>
<input onChange={(e) => setValue(e.target.value)} />

// Forms
const [value, setValue] = useState('');
<form onSubmit={handleSubmit}>
  <input
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
</form>