react

useState manages local state in functional components, returning a value and setter function. useEffect handles side effects (data fetching, subscriptions, DOM manipulation) and runs after render. The dependency array controls when effects re-run.

Context provides a way to pass data through the component tree without prop drilling. Use it for global data like themes, authentication, or locale. For frequently changing data or complex state logic, consider state management libraries instead.

Custom hooks are JavaScript functions starting with 'use' that encapsulate reusable stateful logic. They can use other hooks and share logic between components without duplicating code or adding components to the tree.

useRef creates a mutable reference that persists across renders without causing re-renders when changed. Use it for accessing DOM elements, storing mutable values that don't need to trigger updates, and keeping references to timers or previous values.

Controlled components have their form data managed by React state - the input value is always driven by state. Uncontrolled components let the DOM handle form data using refs to access values when needed. Controlled components are recommended for most cases.

React Router provides client-side routing for React applications, enabling navigation without page reloads. It uses components like BrowserRouter, Routes, Route, and Link, with hooks like useNavigate and useParams for programmatic navigation and accessing route parameters.

Ensure accessibility by using semantic HTML elements, proper ARIA attributes (aria-label, role), managing focus for dynamic content, supporting keyboard navigation, using htmlFor with labels, and testing with tools like eslint-plugin-jsx-a11y and screen readers.

UI libraries like Material-UI, Chakra UI, and Radix provide pre-built, accessible components. Integrate them by installing the package, wrapping your app with a ThemeProvider, and importing components. Use them for rapid development and consistent design; build custom when you need unique designs or minimal bundle size.

useSelector reads data from the Redux store by accepting a selector function that receives the entire state and returns the needed slice. useDispatch returns the store's dispatch function to send actions. Together they replace the older connect() HOC pattern with a simpler hooks-based API.

A useLocalStorage hook syncs React state with the browser's localStorage, providing a useState-like API that automatically persists values across page reloads. It handles JSON serialization, error recovery, SSR safety, and can synchronize across browser tabs via the storage event.

A useFetch hook encapsulates data fetching logic with loading, error, and data states. It uses AbortController to handle cleanup and race conditions when the URL changes or the component unmounts, and can support refetch and basic caching.

CSR renders entirely in the browser, SSR generates HTML on each request server-side, and SSG pre-builds HTML at build time. Each has different tradeoffs for performance, SEO, and data freshness.

React Fragments let you group multiple elements without adding an extra DOM node. Use the <Fragment> syntax when you need to pass a key prop, or the shorter <>...</> syntax when you don't.

useEffect with an empty dependency array replaces componentDidMount, useEffect with dependencies replaces componentDidUpdate, and the useEffect cleanup function replaces componentWillUnmount. However, hooks represent a different mental model focused on synchronizing with external systems rather than responding to lifecycle events.

Use Context API for simple, low-frequency state (theme, auth, locale) shared across components. Use Redux (or Redux Toolkit) for complex, frequently-updated state that benefits from middleware, selective subscriptions, time-travel debugging, and predictable update patterns.

An OTP input renders N separate single-character inputs with automatic focus management — advancing on input, reversing on backspace, and handling clipboard paste to distribute digits across all fields.

An autocomplete component debounces user input, fetches matching suggestions from an API, renders a dropdown with keyboard navigation (arrow keys + Enter), highlights the matched portion of each suggestion, and handles edge cases like race conditions and empty states.

Infinite scroll uses Intersection Observer to detect when a sentinel element near the bottom of the list enters the viewport, triggering a fetch for the next page of data. A ref-based approach with proper cleanup prevents race conditions and duplicate requests.