Message

Chat messages with user/assistant styling, branching, and action toolbars — built from components/ai-elements/message.

Example

User message with attachments, assistant response with markdown rendering, branching versions, and action buttons (like, dislike, copy, retry).

palace-of-fine-arts.jpg
How do React hooks work and when should I use them?

React Hooks Guide

React hooks are functions that let you "hook into" React state and lifecycle features from function components. Here's what you need to know:

Core Hooks

useState

Adds state to functional components:

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

useEffect

Handles side effects (data fetching, subscriptions, DOM updates):

jsx
useEffect(() => {  document.title = `You clicked ${count} times`;
  // Cleanup function (optional)  return () => {    document.title = 'React App';  };}, [count]); // Dependency array

When to Use Hooks

  • ✅ Function components - Hooks only work in function components
  • ✅ Replacing class components - Modern React favors hooks over classes
  • ✅ Sharing stateful logic - Create custom hooks to reuse logic
  • ❌ Class components - Use lifecycle methods instead

Rules of Hooks

  1. Only call hooks at the top level (not inside loops, conditions, or nested functions)
  2. Only call hooks from React functions (components or custom hooks)

Would you like to explore more advanced hooks like useCallback or useMemo?