React Cheat Sheet

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

<Greeting name="World"><p>Welcome!</p></Greeting>

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  onClick: () => void;
  children: React.ReactNode;
}

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

const [count, setCount] = useState(0);
setCount(5);           // Direct value
setCount(prev => prev + 1);  // Functional update

const [user, setUser] = useState<User | null>(null);

// Run on mount
useEffect(() => {
  fetchData();
}, []);

// Run when dependency changes
useEffect(() => {
  document.title = name;
}, [name]);

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

const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();

// Mutable value (no re-render)
const renderCount = useRef(0);
renderCount.current++;

const filtered = useMemo(
  () => items.filter(i => i.active),
  [items]
);

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

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'reset': return { count: 0 };
    default: throw new Error();
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });

const ThemeContext = createContext<'light' | 'dark'>('light');

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

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

{isLoggedIn && <Dashboard />}
{error ? <Error msg={error} /> : <Content />}
{status === 'loading' && <Spinner />}

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}
// Never use index as key if list can reorder

const [email, setEmail] = useState('');
<form onSubmit={(e) => { e.preventDefault(); submit(email); }}>
  <input value={email} onChange={(e) => setEmail(e.target.value)} />
  <button type="submit">Send</button>
</form>

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue] as const;
}

const ExpensiveList = React.memo(function ExpensiveList({ items }) {
  return items.map(i => <Item key={i.id} {...i} />);
});
// Only re-renders when items change

const AdminPanel = React.lazy(() => import('./AdminPanel'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <AdminPanel />
    </Suspense>
  );
}