React.js

Class Component (Old way): - Old way of writing React components - Uses lifecycle methods like componentDidMount, componentDidUpdate, componentWillUnmount - More code, complex syntax - Uses "this" keyword to access state and props Functional Component (Modern way): - New and modern way of writing React components - Uses hooks instead of lifecycle methods - Less code, simple and clean syntax - No "this" keyword needed - Returns JSX (HTML like syntax) Functional components are now preferred because they are simpler, more readable, and hooks provide powerful features with cleaner code.

React component has 3 lifecycle stages — Mount, Update, and Unmount. Mounting – when the component is created and added to the DOM. Updating – when state or props change and the component re-renders. Unmounting – when the component is removed from the DOM. For Example: Counter Application - When the component loads for the first time, it enters the Mounting phase. - When the user clicks the Increment button, the state changes, causing the component to re-render. This is the Updating phase. - When the user navigates away and the component is removed from the screen, it enters the Unmounting phase. In functional components, we handle these lifecycle events using the useEffect hook.

Hooks are special functions that let us use state and lifecycle features inside functional components. Common Hooks: useState() - Stores and manages data inside a component. When data changes, the component re-renders with the new value. useEffect() - Runs side effects after component renders. Used for API calls, subscriptions, timers, and DOM updates. Takes a dependency array to control when it runs. useRef() - Gives direct reference to a DOM element. Does not cause re-render when value changes. Useful for focusing inputs or accessing DOM directly. useMemo() - Caches result of heavy calculations so it doesn't recalculate on every render. Only recalculates when dependencies change. Improves performance. useCallback() - Caches a function so it doesn't get recreated on every render. Used when passing functions to child components to prevent unnecessary re-renders. useContext() - Used to share data globally across components without prop drilling. Creates a centralized data store accessible from any component. useReducer() - Used to manage complex state logic. Alternative to useState when state has multiple values or complex updates. Takes a reducer function and initial state.

React Router is a library for client-side routing. Use <BrowserRouter> to wrap app, <Routes> for routes, <Route path="/" element={<Home />} />. Link for navigation without page reload. useParams() and useNavigate() hooks access dynamic routes and navigate programmatically. React Router enables single-page applications with multiple views.

Controlled component: React state manages form value. onChange updates state, input value comes from state. Uncontrolled component: DOM manages value directly using useRef. getValue from ref when needed. Controlled components are predictable, easier to validate. Use controlled for most cases.

A Higher Order Component is a function that takes a component and returns a new component with additional props or behavior. HOCs are used to reuse component logic, such as adding authentication, data fetching, or styling. To reuse common logic across multiple components without duplicating code.

Virtual DOM is a lightweight copy of the real DOM kept in memory. React uses it to update the UI efficiently without touching the real DOM directly. Process: 1. When state changes, React creates a new Virtual DOM 2. React compares new Virtual DOM with old Virtual DOM - this is called "diffing" 3. React finds only the changed parts 4. React updates only those changed parts in the real DOM - this is called "reconciliation" Benefits: - Makes React much faster than directly manipulating the real DOM - Reduces browser reflows and repaints - Batches DOM updates for better performance - Allows React to optimize which components need to re-render This is why React is efficient even with complex UIs and frequent state changes.

useEffect runs side effects after component renders. The dependency array controls when it runs: empty array = once on mount only, no array = after every render, specific dependencies = only when those dependencies change. Return a cleanup function to prevent memory leaks. useEffect essentially combines componentDidMount + componentDidUpdate + componentWillUnmount.

React.memo prevents re-render if props haven't changed. Wraps component: const MyComponent = React.memo(Component). Performs shallow comparison of props. Useful for expensive computations. Can pass custom comparison function: React.memo(Component, (prevProps, nextProps) => equals).

Error boundary is a class component that catches errors in child components. Prevents entire app from crashing. Implement: componentDidCatch(error, errorInfo) and getDerivedStateFromError(error). Wraps risky components: <ErrorBoundary><Component /></ErrorBoundary>. Shows fallback UI on error. Functional components can't be error boundaries yet.

```text When I optimize a React app, I focus on 5 things: 1. Render performance - React.memo to avoid unnecessary re-renders - useMemo to cache expensive calculations - useCallback to keep function references stable 2. Loading performance - Lazy loading and code splitting - Suspense with fallback UI - Proper loading states instead of blank screens 3. List performance - Pagination for large data sets - Infinite scroll when needed - Windowing or virtualization for huge lists 4. Asset optimization - Image optimization - CDN for static assets - Smaller bundle size and fewer unnecessary assets 5. Data performance - Debouncing for search inputs - API response caching - Use SSG or ISR when the page does not need real-time data So in short, I reduce unnecessary renders, load only what is needed, and cache wherever it makes sense. That gives me a faster UI and a better user experience. ```

Use controlled components: state tracks input values, onChange updates state. Handle submit with onSubmit. Validate before submission. Use libraries like Formik or React Hook Form for complex forms. They handle validation, error messages, and submission. For simple forms, manual state management works fine.