React Cheatsheet

React is a JavaScript library for building user interfaces from reusable components. This cheatsheet covers the core hooks and patterns for functional components.

Components

Functional components return JSX.

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

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

useState

Local component state.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

useEffect

Side effects and lifecycle.

import { useEffect } from "react";

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // cleanup
}, [dependency]);                  // runs when dependency changes

Props & Children

Pass data and nested content.

<Card title="Hi" onClose={handleClose}>
  <p>Body content</p>
</Card>

function Card({ title, children }) {
  return <div><h2>{title}</h2>{children}</div>;
}

Conditional Rendering

Show UI based on state.

{isLoading && <Spinner />}
{user ? <Profile user={user} /> : <Login />}
{items.length === 0 && <Empty />}

Lists

Render arrays with keys.

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

useRef

Persist values and access DOM.

import { useRef } from "react";

const inputRef = useRef(null);
<input ref={inputRef} />;
inputRef.current.focus();

useContext

Share state without prop drilling.

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");
const theme = useContext(ThemeContext);

Custom Hooks

Extract reusable logic.

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = () => setOn(o => !o);
  return [on, toggle];
}

---

React's component model and hooks make building interactive UIs productive. Master these patterns, then explore state libraries, React Query, and frameworks like Next.js.

For full documentation, see https://react.dev/