• Use the ternary operator inside JSX for inline conditionals.

  <div>{user ? user.name : "Guest"}</div>

• Read as "if user is truthy, show user.name, else show Guest".
• Keep ternaries simple and readable — use if statements for complex logic.
• Nest ternaries only for quick reads, not for multiple conditions.

  <div>{user ? (user.isAdmin ? "Admin" : "User") : "Guest"}</div>

• Extract nested ternaries into separate components for clarity.

• Use a switch statement before the return for multiple conditions.

  function Status({ status }) {
    switch (status) {
      case "loading":
        return <p>Loading...</p>;
      case "success":
        return <p>Done!</p>;
      case "error":
        return <p>Error occurred</p>;
      default:
        return null;
    }
  }

• Switch works well when you have many distinct states to handle.
• Always include a default case for unexpected values.
• Extract each case into a separate component for reusability.

• Attach events with camelCase attribute names like onClick, not lowercase onclick.

  function Button() {
    function handleClick() {
      console.log("Button clicked");
    }
  
    return <button onClick={handleClick}>Click me</button>;
  }
  

• Pass a function reference, not a function call, or it runs on every render.

  // Good: pass the function
  <button onClick={handleClick}>Click</button>
  
  // Bad: calls function immediately on render
  <button onClick={handleClick()}>Click</button>
  

• Write inline handlers as arrow functions for short, one-off logic.

  <button onClick={() => console.log("clicked")}>Click</button>
  

• Pass extra arguments to a handler by wrapping the call in an arrow function.

  function List({ items }) {
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>
            <button onClick={() => handleDelete(item.id)}>
              Delete {item.name}
            </button>
          </li>
        ))}
      </ul>
    );
  }
  

• Name handler functions with a handle prefix so their purpose is obvious at a glance.

  function handleDelete(id) { /* ... */ }
  function handleToggle() { /* ... */ }
  

• Access event properties like target and preventDefault.

  function handleClick(event) {
    console.log(event.target);  // the element clicked
    console.log(event.type);    // "click"
  }
  
  function handleSubmit(event) {
    event.preventDefault();     // stop form submission
    event.stopPropagation();    // stop event bubbling
  }

• React's SyntheticEvent wraps the browser's native event for cross-browser consistency; access the underlying event with e.nativeEvent.

  function handleClick(e) {
    console.log(e.nativeEvent); // the underlying browser Event
  }

• As of React 17, synthetic events are no longer pooled and reused: each event object is freshly created and stays valid for as long as you hold a reference to it, even after the handler returns. Calling e.persist() is now a no-op kept only for backward compatibility — you never need to call it.

  // React 16 and earlier nulled out event fields after the handler ran,
  // so reading e.target.value async required e.persist() first.
  // React 17+: the event object is never pooled, so this just works.
  function handleChange(e) {
    setTimeout(() => console.log(e.target.value), 1000);
  }

• Get input values with e.target.value.

  const handleChange = (e) => {
    setName(e.target.value);
  };

• Read checkbox state with e.target.checked.

  function Checkbox() {
    const [checked, setChecked] = useState(false);
    
    return (
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
    );
  }

• Get the key pressed from keyboard events with e.key.

  function handleKeyDown(e) {
    console.log(e.key);    // "Enter", "Escape", "ArrowUp"
    console.log(e.code);   // "Enter", "Escape", "ArrowUp"
    console.log(e.ctrlKey); // true if Ctrl held
  }

• Access the current target when events bubble up.

  function handleClick(e) {
    console.log(e.target);        // element that was clicked
    console.log(e.currentTarget); // element with the handler
  }

• Use event delegation for lists of items.

  function List({ items }) {
    const handleItemClick = (e) => {
      if (e.target.dataset.id) {
        console.log("Item clicked:", e.target.dataset.id);
      }
    };
    
    return (
      <ul onClick={handleItemClick}>
        {items.map(item => (
          <li key={item.id} data-id={item.id}>
            {item.name}
          </li>
        ))}
      </ul>
    );
  }

• More efficient than adding listeners to each item.
• Use data-* attributes to identify clicked elements.
• Use e.target.closest() to find the nearest matching ancestor.

  function handleClick(e) {
    const row = e.target.closest("[data-row-id]");
    if (row) {
      console.log("Row clicked:", row.dataset.rowId);
    }
  }

• Stop bubbling with e.stopPropagation() to prevent parent handlers.

  function Card() {
    return (
      <div onClick={handleCardClick}>
        Card content
        <button onClick={(e) => {
          e.stopPropagation(); // don't trigger handleCardClick
          handleDeleteClick();
        }}>
          Delete
        </button>
      </div>
    );
  }

• Store form data in a single state object to keep it organized.

  const [form, setForm] = useState({ name: "", email: "" });
  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

• Use the name attribute to identify which input changed.
• Spread the previous state and update only the changed field.
• This pattern scales well as forms grow with more fields.
• Consider moving to a form library for very large forms.

• Validate input on every change or only when the user leaves the field.

  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const handleChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    if (!value.includes("@")) setError("Invalid email");
    else setError("");
  };

• Show validation errors near the invalid input for quick feedback.
• Disable the submit button while there are validation errors.

  <button disabled={error}>Submit</button>

• Use a form library like React Hook Form for complex validation rules.

• Use React.Fragment to group multiple elements without a wrapper.

  function List() {
    return (
      <React.Fragment>
        <h2>Title</h2>
        <p>Description</p>
      </React.Fragment>
    );
  }

• Fragments don't create extra DOM nodes.

  // Without Fragment: creates a div
  <div>
    <Header />
    <Content />
    <Footer />
  </div>
  
  // With Fragment: no extra node
  <React.Fragment>
    <Header />
    <Content />
    <Footer />
  </React.Fragment>

• Return multiple elements from a component.

  function Profile() {
    return (
      <React.Fragment>
        <UserHeader />
        <UserContent />
        <UserFooter />
      </React.Fragment>
    );
  }

• Use fragments in table rows to avoid invalid HTML.

  function TableRow({ item }) {
    return (
      <React.Fragment>
        <td>{item.name}</td>
        <td>{item.price}</td>
        <td>{item.stock}</td>
      </React.Fragment>
    );
  }

• Fragments are required when a component must return multiple siblings.

  // JSX requires a single root — Fragment is the clean solution
  function NavItems() {
    return (
      <>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </>
    );
  }

• Only React.Fragment supports the key prop.

  function List({ items }) {
    return (
      <>
        {items.map(item => (
          <React.Fragment key={item.id}>
            <dt>{item.name}</dt>
            <dd>{item.description}</dd>
          </React.Fragment>
        ))}
      </>
    );
  }

• Use keys when rendering multiple elements per item.

  // Without key: React can't track which elements belong together
  items.map(item => (
    <React.Fragment key={item.id}>
      <Header title={item.title} />
      <Body content={item.content} />
    </React.Fragment>
  ))

• Short syntax <></> doesn't support keys.

  // This won't work:
  <>
    {items.map(item => (
      <>
        <p key={item.id}>{item.name}</p>
      </>
    ))}
  </>

• Place the key on React.Fragment, not on child elements.

  // Wrong: key on child, not on fragment
  {items.map(item => (
    <React.Fragment>
      <p key={item.id}>{item.name}</p>
    </React.Fragment>
  ))}
  
  // Correct: key on the fragment itself
  {items.map(item => (
    <React.Fragment key={item.id}>
      <p>{item.name}</p>
    </React.Fragment>
  ))}

• Keys must be unique among siblings, not globally unique.

  // These keys are fine — they're in separate lists
  listA.map(item => <React.Fragment key={item.id}>...</React.Fragment>)
  listB.map(item => <React.Fragment key={item.id}>...</React.Fragment>)

• Don't use <></> when you need a key on items.

  // Wrong: loses key benefit
  {items.map(item => (
    <>
      <p key={item.id}>{item.name}</p>
    </>
  ))}
  
  // Correct: use React.Fragment with key
  {items.map(item => (
    <React.Fragment key={item.id}>
      <p>{item.name}</p>
    </React.Fragment>
  ))}

• Don't add classes or other attributes to fragments.

  // Wrong: fragments don't support attributes
  <> className="wrapper">
    <Content />
  </>
  
  // Correct: use a div if you need attributes
  <div className="wrapper">
    <Content />
  </div>

• Don't forget to import React when using the full syntax.

  // Required for React.Fragment in older setups
  import React from "react";
  
  // Not required for short syntax — handled by JSX transform
  <>...</>

• Don't use index as key if items can be reordered or removed.

  // Bad: index as key causes issues when list order changes
  {items.map((item, index) => (
    <React.Fragment key={index}>...</React.Fragment>
  ))}
  
  // Good: stable unique ID
  {items.map(item => (
    <React.Fragment key={item.id}>...</React.Fragment>
  ))}

• Don't nest fragments unnecessarily — keep JSX clean.

  // Unnecessary nesting
  <>
    <>
      <p>Hello</p>
    </>
  </>
  
  // Clean: single fragment
  <>
    <p>Hello</p>
  </>

• Use stable, unique identifiers from your data.

  // Good: unique ID
  {items.map(item => (
    <div key={item.id}>{item.name}</div>
  ))}

• Avoid array indices as keys, especially for dynamic lists.

  // Bad: index changes when items are reordered
  {items.map((item, index) => (
    <div key={index}>{item.name}</div>
  ))}

• Use IDs from a database or UUID library for reliable keys.

  import { v4 as uuidv4 } from "uuid";
  
  const newItem = { id: uuidv4(), name: "Charlie" };

• Keys don't need to be globally unique, just unique within the list.

• Render a simple list with stable keys.

  export default function UserList({ users }) {
    return (
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }

• Handle empty lists gracefully.

  if (users.length === 0) {
    return <p>No users found</p>;
  }
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );

• Filter and sort before rendering, not in the map.

  const active = users.filter(u => u.isActive);
  const sorted = active.sort((a, b) => a.name.localeCompare(b.name));
  
  return sorted.map(user => (
    <UserItem key={user.id} user={user} />
  ));

• Pass data to child components using props as an object.

  function Greeting({ name, age }) {
    return <p>Hello {name}, age {age}</p>;
  }
  
  <Greeting name="Alice" age={30} />

• Destructure props for cleaner code in function components.

  function Button({ label, onClick, disabled = false }) {
    return (
      <button onClick={onClick} disabled={disabled}>
        {label}
      </button>
    );
  }

• Use default values for optional props.

  function Card({ title = "Untitled", content }) {
    return <div><h2>{title}</h2><p>{content}</p></div>;
  }

• Pass functions as props to handle events from children.

  <Button onClick={() => handleClick()} label="Click me" />

• Prop drilling occurs when passing props through many levels.

  // Level 1
  <App user={user}>
    // Level 2
    <Layout user={user}>
      // Level 3
      <Sidebar user={user}>
        // Level 4
        <Profile user={user} />
      </Sidebar>
    </Layout>
  </App>

• Use Context to avoid prop drilling for shared data.

  const UserContext = createContext();
  
  <UserContext.Provider value={user}>
    <App />
  </UserContext.Provider>
  
  function Profile() {
    const user = useContext(UserContext);
    return <div>{user.name}</div>;
  }

• Use composition to pass components instead of data.

  <Layout sidebar={<Sidebar />}>
    <Main />
  </Layout>

• Clone and modify children with cloneElement.

  function FormFields({ children, error }) {
    return React.Children.map(children, (child) =>
      React.cloneElement(child, { error })
    );
  }

• Use children as a function for render props.

  function Toggle({ children }) {
    const [open, setOpen] = useState(false);
    return children({ open, toggle: () => setOpen(!open) });
  }
  
  <Toggle>
    {({ open, toggle }) => (
      <button onClick={toggle}>
        {open ? "Close" : "Open"}
      </button>
    )}
  </Toggle>

• Spread remaining props to avoid manual forwarding.

  function Button({ label, ...rest }) {
    return <button {...rest}>{label}</button>;
  }

Before React 19, passing a ref into a child component required wrapping it in forwardRef. React 19 removes that requirement — ref is now a plain prop, just like className or onClick.

• Before (React 18 and earlier) — forwardRef wrapper required:

  // React 18: you had to wrap in forwardRef
  const Input = forwardRef(function Input(props, ref) {
    return <input ref={ref} {...props} />;
  });
  
  function Form() {
    const inputRef = useRef(null);
    return <Input ref={inputRef} placeholder="Email" />;
  }

• After (React 19) — ref arrives as a plain prop:

  // React 19: ref is just a prop
  function Input({ ref, ...props }) {
    return <input ref={ref} {...props} />;
  }
  
  function Form() {
    const inputRef = useRef(null);
    return <Input ref={inputRef} placeholder="Email" />;
  }

• Class components still use createRef and are unaffected by this change.
• forwardRef still works in React 19 for library backward compatibility but shows a deprecation warning in dev mode.

useImperativeHandle lets a child component decide exactly which methods a parent can call through a ref. Instead of exposing the raw DOM node, the child publishes a controlled object.

• Expose focus and clear without leaking the internal input ref:

  // React 19 style — ref as a prop, no forwardRef needed
  function FancyInput({ ref }) {
    const inputRef = useRef(null);
  
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current.focus();
      },
      clear() {
        inputRef.current.value = '';
      },
    }));
  
    return <input ref={inputRef} className="fancy" />;
  }
  
  function Form() {
    const fancyRef = useRef(null);
  
    return (
      <>
        <FancyInput ref={fancyRef} />
        <button onClick={() => fancyRef.current.focus()}>Focus</button>
        <button onClick={() => fancyRef.current.clear()}>Clear</button>
      </>
    );
  }

• Pass a dependency array as the third argument to control when the handle object is recreated:

  useImperativeHandle(ref, () => ({ getValue: () => value }), [value]);

• Restrict the exposed API intentionally — if you don't expose scrollIntoView, the parent simply cannot call it.

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    // scrollIntoView intentionally not exposed
  }));

• Declare state with initial value.

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

• count is the current value, setCount updates and re-renders.

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

• Each state variable needs its own useState call.
• Initialize state with strings, numbers, booleans, arrays, or objects.

  const [name, setName] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [items, setItems] = useState([]);
  const [user, setUser] = useState(null);

• Calling the setter always replaces the value, never merges.

  // Calling setCount replaces the entire value
  setCount(42); // count is now 42, not 42 + oldCount

• Use a function to update state based on previous value.

  function Counter() {
    const [count, setCount] = useState(0);
    
    // Direct update (fine for simple cases)
    // setCount(count + 1);
    
    // Functional update (preferred for dependent updates)
    return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
  }

• Functional updates are safer when multiple updates happen fast.

  const handleClick = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    // Both increments use the latest state — count increases by 2
  };

• Use functional updates inside useEffect and useCallback.

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1); // safe inside interval
    }, 1000);
    return () => clearInterval(timer);
  }, []); // no count in deps needed

• Functional updates work with arrays too.

  function addItem(newItem) {
    setItems(prev => [...prev, newItem]);
  }
  
  function removeItem(id) {
    setItems(prev => prev.filter(item => item.id !== id));
  }

• Direct updates are fine when the new value doesn't depend on old state.

  // setName doesn't need the previous name
  setName("Alice");
  setIsOpen(true);

• Create a new object when updating — never mutate state directly.

  const [user, setUser] = useState({ name: "Alice", age: 30 });
  
  // Wrong: mutation — React won't detect the change
  user.age = 31;
  
  // Right: create new object with spread
  setUser({ ...user, age: 31 });

• Create a new array for all array state operations.

  const [items, setItems] = useState(["a", "b", "c"]);
  
  // Add item
  setItems([...items, "d"]);
  
  // Remove item
  setItems(items.filter(item => item !== "b"));

• Update a nested object by spreading at every level.

  const [profile, setProfile] = useState({ name: "Alice", address: { city: "NYC" } });
  
  // Update nested field
  setProfile(prev => ({
    ...prev,
    address: { ...prev.address, city: "LA" }
  }));

• Update a specific item in an array by mapping over it.

  const [tasks, setTasks] = useState([{ id: 1, done: false }]);
  
  function toggleTask(id) {
    setTasks(prev =>
      prev.map(t => t.id === id ? { ...t, done: !t.done } : t)
    );
  }

• Use the Immer library for complex nested updates.

  import produce from "immer";
  
  setProfile(produce(draft => {
    draft.address.city = "LA"; // direct mutation is safe inside produce
  }));

• Use aria-label when the visible text doesn't describe the element.

  <button aria-label="Close menu">×</button>
  <button aria-label="Delete item Alice">Delete</button>

• Use aria-live to announce dynamic content to screen readers.

  <div aria-live="polite" aria-atomic="true">
    {statusMessage}
  </div>

• Use role to define the purpose of a custom element.

  <div role="button" onClick={handleClick} tabIndex="0">
    Custom Button
  </div>

• Use aria-expanded to indicate open or closed state.

  <button
    aria-expanded={isOpen}
    aria-controls="menu-list"
    onClick={() => setIsOpen(!isOpen)}
  >
    Menu
  </button>

• Use aria-describedby to link help text to an input.

  <input
    id="password"
    type="password"
    aria-describedby="password-hint"
  />
  <p id="password-hint">Must be at least 8 characters.</p>

• Make interactive elements keyboard accessible by default.

  // Buttons and links are keyboard accessible by default
  <button onClick={handleClick}>Click me</button>
  <a href="/next">Next page</a>

• Use tabIndex="0" to make custom elements focusable.

  <div
    role="button"
    tabIndex="0"
    onClick={handleClick}
    onKeyDown={(e) => e.key === "Enter" && handleClick()}
  >
    Custom Button
  </div>

• Handle both Enter and Space for custom button elements.

  function handleKeyDown(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleClick();
    }
  }

• Trap focus inside modals when they are open.

  function Modal({ isOpen, onClose, children }) {
    const firstFocusRef = useRef(null);
    
    useEffect(() => {
      if (isOpen) firstFocusRef.current?.focus();
    }, [isOpen]);
    
    return isOpen ? (
      <div role="dialog" aria-modal="true">
        <button ref={firstFocusRef} onClick={onClose}>Close</button>
        {children}
      </div>
    ) : null;
  }

• Use tabIndex="-1" to remove elements from tab order.

  // Remove decorative icon from keyboard navigation
  <span tabIndex="-1" aria-hidden="true">★</span>

• Build components that work together as a group with shared state.

  const Accordion = ({ children }) => {
    const [active, setActive] = useState(null);
    return (
      <AccordionContext.Provider value={{ active, setActive }}>
        {children}
      </AccordionContext.Provider>
    );
  };
  
  const AccordionItem = ({ id, title, children }) => {
    const { active, setActive } = useContext(AccordionContext);
    return (
      <div>
        <button onClick={() => setActive(id)}>{title}</button>
        {active === id && <div>{children}</div>}
      </div>
    );
  };
  
  <Accordion>
    <AccordionItem id="1" title="Section 1">Content 1</AccordionItem>
    <AccordionItem id="2" title="Section 2">Content 2</AccordionItem>
  </Accordion>

• Compound components are flexible because the child components control their appearance.
• They share state through Context instead of passing props through every level.
• Use this pattern for tightly coupled components like form fields and labels.

• Wrap a component to add or modify its behavior.

  const withAuth = (Component) => {
    return (props) => {
      const [user, setUser] = useState(null);
      const [loading, setLoading] = useState(true);
      
      useEffect(() => {
        checkAuth().then(u => {
          setUser(u);
          setLoading(false);
        });
      }, []);
      
      if (loading) return <p>Loading...</p>;
      if (!user) return <p>Not authenticated</p>;
      
      return <Component user={user} {...props} />;
    };
  };
  
  const Dashboard = ({ user }) => <h1>Welcome {user.name}</h1>;
  const ProtectedDashboard = withAuth(Dashboard);

• HOCs add props, logic, or wrappers to existing components.
• They're useful for cross-cutting concerns like authentication or theming.
• Avoid deeply nested HOCs — use composition instead.

• Custom hooks often replace render props and HOCs for sharing logic.

  function useMousePosition() {
    const [pos, setPos] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const handleMove = (e) => setPos({ x: e.clientX, y: e.clientY });
      window.addEventListener('mousemove', handleMove);
      return () => window.removeEventListener('mousemove', handleMove);
    }, []);
    return pos;
  }
  
  function MyComponent() {
    const pos = useMousePosition();
    return <p>Position: {pos.x}, {pos.y}</p>;
  }

• Custom hooks are simpler and more flexible than render props or HOCs.
• Use hooks as your first choice for sharing logic in modern React.
• Composition patterns are still useful for component APIs and layout.

• Always start custom hook names with use, like useToggle.

  // Good: clearly indicates it's a hook
  function useToggle() { }
  function useFetch(url) { }
  function useLocalStorage(key) { }
  
  // Bad: doesn't follow naming convention
  function toggle() { }
  function fetch() { }

• Use camelCase after the use prefix for consistency.
• Naming triggers React ESLint rules and warnings.
• Pick names that describe what the hook does.

• Compose several built-in hooks inside one custom hook to build a higher-level abstraction.

  function useOnlineStatus() {
    const [isOnline, setIsOnline] = useState(navigator.onLine);
  
    useEffect(() => {
      const goOnline = () => setIsOnline(true);
      const goOffline = () => setIsOnline(false);
      window.addEventListener('online', goOnline);
      window.addEventListener('offline', goOffline);
      return () => {
        window.removeEventListener('online', goOnline);
        window.removeEventListener('offline', goOffline);
      };
    }, []);
  
    return isOnline;
  }
  

• Build one custom hook on top of another instead of duplicating logic.

  function useSyncedField(key, initialValue) {
    const [value, setValue] = useLocalStorage(key, initialValue); // reuse an existing hook
    const isOnline = useOnlineStatus(); // compose a second hook
    return { value, setValue, isOnline };
  }
  

• Type a generic custom hook so callers get the correct inferred return type.

  function useToggle<T = boolean>(initial: T): [T, () => void] {
    const [value, setValue] = useState(initial);
    const toggle = useCallback(() => setValue(v => !v as T), []);
    return [value, toggle];
  }
  
  const [isOpen, toggleOpen] = useToggle(false); // isOpen inferred as boolean
  

• Test a custom hook in isolation with renderHook from @testing-library/react.

  import { renderHook, act } from '@testing-library/react';
  
  test('useToggle flips its value', () => {
    const { result } = renderHook(() => useToggle(false));
    act(() => result.current[1]()); // call the toggle function
    expect(result.current[0]).toBe(true);
  });
  

• renderHook wraps your hook in a tiny test component so you never need a real UI to test it.
• Keep composed hooks shallow — two or three layers deep is easier to trace than a long chain.

• Create a class component with error lifecycle methods.

  class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
    
    static getDerivedStateFromError(error) {
      return { hasError: true };
    }
    
    render() {
      if (this.state.hasError) {
        return <h1>Something went wrong.</h1>;
      }
      return this.props.children;
    }
  }

• Error boundaries only work with class components, not functions.
• Use getDerivedStateFromError to update state when an error occurs.
• This catches errors in the component tree below the boundary.
• Error boundaries must return a fallback UI or null.

• Error boundaries catch errors during rendering in child components.

  // This error is caught
  function Child() {
    throw new Error("Oops");
  }
  
  <ErrorBoundary>
    <Child /> {/* Error is caught here */}
  </ErrorBoundary>

• They do NOT catch errors from event handlers or async code.

  // This error is NOT caught
  <button onClick={() => {
    throw new Error("Oops");
  }}>
    Click me
  </button>
  
  // Use try-catch for these instead
  <button onClick={() => {
    try {
      riskyOperation();
    } catch (error) {
      // Handle error
    }
  }}>
    Safe click
  </button>

• Error boundaries don't catch errors in the boundary itself.

• Show a user-friendly error message with recovery option.

  class ErrorBoundary extends React.Component {
    render() {
      if (this.state.hasError) {
        return (
          <div>
            <h1>Oops, something went wrong</h1>
            <p>Please try refreshing the page</p>
            <button onClick={() => window.location.reload()}>
              Reload Page
            </button>
          </div>
        );
      }
      return this.props.children;
    }
  }

• Create reusable error boundary components for common layouts.

  <PageErrorBoundary>
    <PageContent />
  </PageErrorBoundary>

• Combine error boundaries with error tracking for production monitoring.
• Reset error state when user navigates to a new page.

• useCallback memoizes a function reference across renders.

  const handleClick = useCallback(() => {
    doSomething(value);
  }, [value]);

• useMemo memoizes a computed value across renders.

  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b);
  }, [a, b]);

• Use useCallback to prevent child re-renders when passing callbacks.

  const handleSubmit = useCallback((data) => {
    saveData(data);
  }, []); // stable reference — MemoizedChild won't re-render
  
  return <MemoizedChild onSubmit={handleSubmit} />;

• Use useMemo to avoid recalculating expensive derived data.

  const sortedItems = useMemo(
    () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
    [items]
  );

• Both hooks only optimize — they don't change behavior.

  // Add these only after profiling shows a real bottleneck
  // Premature optimization adds complexity without benefit

• useLayoutEffect runs synchronously before paint — use for measurements.

  useLayoutEffect(() => {
    // Runs before browser paints — safe to read DOM measurements here
    const height = elementRef.current.offsetHeight;
    setHeight(height);
  }, []);

• useDebugValue shows hook values in React DevTools.

  function useCustomHook(value) {
    useDebugValue(value > 10 ? "large" : "small");
    return value;
  }

• useTransition marks an update as non-urgent to keep UI responsive.

  const [isPending, startTransition] = useTransition();
  startTransition(() => {
    setSearchResults(results); // won't block input from being typed
  });

• useDeferredValue defers a value update without a transition.

  const deferredQuery = useDeferredValue(searchQuery);
  const results = useMemo(() => filterList(deferredQuery), [deferredQuery]);

• useId generates a stable unique ID for accessibility attributes.

  function Input({ label }) {
    const id = useId();
    return (
      <>
        <label htmlFor={id}>{label}</label>
        <input id={id} />
      </>
    );
  }