React 19 Cheat Sheet - Hooks, Patterns, and Best Practices (2026)

React 19 Cheat Sheet (2026)

Every React hook, pattern, and best practice in one page.

useState

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

useEffect

useEffect(() => {
  // Runs after render
  const subscription = subscribe();
  return () => subscription.unsubscribe(); // Cleanup
}, [dependency]); // Only re-run when dependency changes

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

useContext

const ThemeContext = createContext('dark');
function App() {
  return (
    <ThemeContext.Provider value="light">
      <Child />
    </ThemeContext.Provider>
  );
}
function Child() {
  const theme = useContext(ThemeContext);
  return <div>{theme}</div>;
}

useRef

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

useMemo and useCallback

// Memoize expensive computation
const sorted = useMemo(() => items.sort(compareFn), [items]);

// Memoize callback
const handleClick = useCallback(() => doSomething(id), [id]);

useReducer

const [state, dispatch] = useReducer(reducer, initialState);
function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}

Custom Hooks

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

Server Components (React 19)

// Default in Next.js - runs on server
async function UserList() {
  const users = await db.user.findMany();
  return users.map(u => <UserCard key={u.id} user={u} />);
}

Actions (React 19)

async function handleSubmit(formData) {
  'use server'; // Next.js Server Action
  const name = formData.get('name');
  await db.user.create({ data: { name } });
}

<form action={handleSubmit}>
  <input name="name" />
  <button type="submit">Submit</button>
</form>

Get 10 production-ready React hooks + 30 Tailwind components + 5 more products. Pay what you want: