What is JSX and how does it differ from regular HTML?
JSX is a syntax extension for JavaScript that allows writing HTML-like code in React. Unlike HTML, JSX uses camelCase properties, requires closing all tags, uses className instead of class, and can directly embed JavaScript expressions using curly braces {}.
What is the difference between functional and class components in React?
Functional components are JavaScript functions that accept props and return JSX, making them simpler and more concise. Class components extend React.Component, can have local state and lifecycle methods, but are generally more verbose. Modern React primarily uses functional components with hooks.
How do you pass data between components using props?
Props are passed as attributes in JSX, similar to HTML attributes. Parent components can pass any JavaScript value (strings, numbers, objects, functions) to child components. Child components receive these props as function parameters or this.props in class components.
What are fragments in React and when should you use them?
Fragments (<React.Fragment> or <>) allow grouping multiple children without adding extra nodes to the DOM. They're useful when you need to return multiple elements from a component without introducing unnecessary wrapper divs, helping maintain clean DOM structure.
How do you conditionally render content in JSX?
JSX supports conditional rendering through: 1) Ternary operators {condition ? elementA : elementB}, 2) Logical && operator for simple conditions {condition && element}, 3) If statements outside the return statement, 4) Extracting conditions to separate methods.
What are Pure Components and when should they be used?
Pure Components (React.PureComponent or React.memo) implement shouldComponentUpdate with a shallow prop and state comparison. They're used to optimize performance by preventing unnecessary re-renders when props or state haven't changed significantly.
How do you handle dynamic attribute values in JSX?
Dynamic attributes in JSX use curly braces to embed JavaScript expressions: className={`base ${conditional}`}, style={{property: value}}, or data-attributes={dynamicValue}. Boolean attributes can be set using conditional expressions.
What are Higher-Order Components (HOCs) and what problems do they solve?
HOCs are functions that take a component and return a new component with additional props or behavior. They're used for code reuse, adding additional functionality like data fetching, authentication, or logging. HOCs follow the pattern: const EnhancedComponent = higherOrderComponent(WrappedComponent).
How do you handle lists and keys in React?
Lists are rendered using array methods like map(). Each list item must have a unique 'key' prop for React's reconciliation process. Keys should be stable, predictable, and unique among siblings. Using array indices as keys is generally discouraged except for static lists.
What are controlled components and how do they differ from uncontrolled components?
Controlled components have their form data controlled by React state, with changes handled through setState. Uncontrolled components store form data in the DOM itself, accessed through refs. Controlled components provide more control but require more code.
How do you handle events in JSX and what is event pooling?
Events in JSX use camelCase and pass functions as event handlers: onClick={handleClick}. React uses synthetic events for cross-browser compatibility. Event pooling (pre-React 17) meant event objects were reused for performance, requiring e.persist() for async access.
What is the children prop and how is it used?
The children prop represents content between component opening and closing tags. It can be strings, elements, or functions (render props). Access via props.children in functional components or this.props.children in class components. Useful for component composition and reusability.
How do you optimize component rendering using memo?
React.memo is a higher-order component that prevents unnecessary re-renders by memoizing the result. It performs a shallow comparison of props and only re-renders if props have changed. Useful for performance optimization in components with expensive renders.
What are portals in React and when would you use them?
Portals (ReactDOM.createPortal) allow rendering children into a DOM node outside the parent component's hierarchy. Useful for modals, tooltips, or floating elements that need to break out of parent container limitations while maintaining React context.
How do you handle prop validation in React components?
Prop validation is handled using PropTypes library for runtime checking. Define propTypes object to specify expected types, required props, and custom validators. In TypeScript, use interface or type definitions for compile-time checking.
What are render props and how do they enable component reuse?
Render props is a pattern where a component receives a function as prop that returns React elements. This enables sharing behavior between components by allowing parent components to control what children render while providing them with necessary data or functionality.
How do you handle dynamic imports for components?
Dynamic imports use React.lazy() with Suspense component for code splitting. This allows components to be loaded only when needed: const DynamicComponent = React.lazy(() => import('./Component')). Suspense provides fallback content during loading.
What are the differences between default and named exports for components?
Default exports (export default Component) allow importing with any name but limit one per file. Named exports (export const Component) require exact names or aliases when importing but allow multiple exports per file. Choice affects module organization and refactoring.
How do you handle component composition versus inheritance?
React favors composition over inheritance. Use props and children for component customization instead of extending classes. Composition provides more flexibility and clearer data flow. Common patterns include containment and specialization.
What are error boundaries and how do they work?
Error boundaries are components that catch JavaScript errors in child component tree, log errors, and display fallback UI. They must be class components using componentDidCatch or static getDerivedStateFromError. They don't catch errors in event handlers or async code.
How do you handle inline styles in JSX?
Inline styles in JSX use double curly braces and camelCase properties: style={{backgroundColor: 'blue'}}. Values can be strings or numbers (pixels automatically added). Dynamic styles can use expressions or computed properties.
What are the benefits and drawbacks of using defaultProps?
defaultProps provide default values for props when not specified by parent. Benefits include cleaner code and fail-safe defaults. Drawbacks include potential overhead and less explicit prop requirements. In modern React, consider default parameters for function components.
How do you handle component lifecycle equivalent in functional components?
Functional components use hooks to replicate lifecycle methods: useState for state, useEffect for componentDidMount/Update/Unmount, useLayoutEffect for synchronous effects. This provides more flexible and targeted lifecycle management.
What are the best practices for organizing component files and folders?
Best practices include: one component per file, grouping related components in folders, separating container and presentational components, using index files for exports, organizing by feature or type, and maintaining consistent naming conventions.
How do you handle component communication beyond props?
Beyond props, components can communicate through context API, event emitters, state management libraries (Redux/MobX), or custom hooks. Choice depends on scope of communication, app size, and performance requirements.
What are the differences between createElement and JSX?
JSX is syntactic sugar that compiles to React.createElement calls. createElement takes element type, props object, and children as arguments. JSX provides more readable, HTML-like syntax while achieving the same result under the hood.
How do you handle component state initialization patterns?
State can be initialized through useState hook with initial value, lazy initial state function for expensive computations, derived state from props, or custom hooks. Consider performance and whether state is truly needed versus props or computed values.
What are the considerations for component reusability?
Reusable components should be generic, well-documented, properly typed, have clear props API, handle edge cases, maintain single responsibility, and be tested thoroughly. Consider composition, prop drilling, and state management needs.
How do you handle conditional CSS classes in JSX?
Conditional CSS classes can be handled using template literals, array join methods, or className utilities like classnames library. Example: className={`base ${condition ? 'active' : ''}`} or using object syntax with classnames.
What is the useState hook and how is it used in React components?
useState is a React hook that adds state to functional components. It returns an array with the current state value and a setter function: const [state, setState] = useState(initialValue). The setter function triggers re-renders when called to update state.
What's the difference between useState and useReducer?
useState is simpler and good for independent pieces of state, while useReducer is better for complex state logic, related state transitions, or when next state depends on previous state. useReducer follows Redux-like patterns with actions and reducers.
How does React batch state updates and why is it important?
React batches multiple state updates in the same synchronous event handler for performance. This means multiple setState calls may be processed in a single re-render. In async operations, use functional updates (prevState => newState) to ensure correct state updates.
What is the Context API and when should it be used?
Context API provides a way to pass data through the component tree without prop drilling. It's useful for global state like themes, user data, or locale, but shouldn't be used for every state as it can cause unnecessary re-renders.
How do you handle state updates with objects and arrays?
Always treat state as immutable. Use spread operator or Object.assign() for objects: setState({...state, newProp: value}). For arrays, use methods like map, filter, or spread: setState([...items, newItem]). Never mutate state directly.
What are the common pitfalls of useState and how to avoid them?
Common pitfalls include: mutating state directly, not using functional updates for state depending on previous value, initializing with expensive operations without lazy initialization, and not considering batching behavior in async operations.
How do you implement state lifting and why is it used?
State lifting involves moving state to a common ancestor component to share it between components. Implementation requires passing state and setter functions as props. Used when multiple components need to share or modify the same state.
What is the useEffect cleanup function's role in state management?
Cleanup functions in useEffect prevent memory leaks and stale state updates by canceling subscriptions or pending operations when component unmounts or dependencies change. Return a cleanup function from useEffect for proper resource management.
How do you optimize Context API to prevent unnecessary re-renders?
Split context into smaller, focused contexts, use React.memo for consumer components, implement value memoization with useMemo, and consider using context selectors. Avoid putting frequently changing values in context.
What are custom hooks and how do they help with state management?
Custom hooks are reusable functions that encapsulate state logic and can use other hooks. They help abstract complex state management, share stateful logic between components, and follow the DRY principle. Names must start with 'use'.
How do you handle form state in React applications?
Form state can be handled using controlled components with useState, formik/react-hook-form libraries for complex forms, or uncontrolled components with refs. Consider validation, submission handling, and error states.
What is the difference between local and global state management?
Local state (useState, useReducer) is component-specific and used for UI state. Global state (Context, Redux) is application-wide and used for shared data. Choose based on state scope and component coupling needs.
How do you implement state persistence in React applications?
State persistence can be achieved using localStorage/sessionStorage with useEffect, custom hooks for storage synchronization, or state management libraries with persistence middleware. Consider serialization and hydration strategies.
What are the benefits of using state machines for complex state?
State machines provide predictable state transitions, clear visualization of possible states, prevent impossible states, and make complex workflows manageable. Libraries like XState help implement state machines in React.
How do you handle async state updates and loading states?
Use multiple state variables for data, loading, and error states. Implement proper error boundaries, loading indicators, and cleanup for cancelled requests. Consider using custom hooks or libraries like react-query for complex data fetching.
What are derived states and when should they be used?
Derived state is calculated from existing state/props during render. Use useMemo for expensive calculations. Avoid storing derived values in state; compute them during render to prevent state synchronization issues.
How do you implement undo/redo functionality with state?
Implement undo/redo using an array of past states and current index. Use useReducer for complex state history management. Consider memory usage and performance implications for large state objects.
What is the role of immutability in React state management?
Immutability ensures predictable state updates, enables efficient change detection for rendering optimization, prevents bugs from unintended state mutations, and supports time-travel debugging features.
How do you handle state synchronization between components?
State synchronization can be achieved through lifting state up, using Context API, implementing pub/sub patterns with custom events, or using state management libraries. Consider performance and complexity trade-offs.
What are the patterns for initializing state from props?
Use props directly when possible, implement getDerivedStateFromProps for class components, or use useEffect for functional components. Avoid anti-patterns like copying props to state unless needed for specific use cases.
How do you handle state updates in nested objects?
Use immutable update patterns with spread operator or libraries like immer. Create new object references at each level of nesting. Consider flattening state structure when possible to simplify updates.
What are the best practices for state organization in large applications?
Organize state by feature/domain, keep state as close as needed to components, use appropriate mix of local and global state, implement proper state normalization, and document state shape and update patterns.
How do you debug state-related issues in React applications?
Use React DevTools to inspect component state, implement logging middleware for state changes, use time-travel debugging in Redux DevTools, and add proper error boundaries and logging for state updates.
What are the considerations for state management in server-side rendering?
Handle initial state hydration, avoid state mismatches between server and client, implement proper state serialization, and consider using state management solutions that support SSR like Redux or Zustand.
How do you implement optimistic updates in state management?
Update UI immediately before API confirmation, maintain temporary and permanent state, implement proper rollback mechanisms for failures, and handle race conditions in concurrent updates.
What are the patterns for sharing state logic between components?
Use custom hooks for reusable state logic, implement higher-order components for state injection, use render props pattern, or leverage Context API for shared state access.
How do you handle real-time state updates with WebSockets?
Implement WebSocket connections in useEffect, handle connection lifecycle, update state with incoming messages, and implement proper cleanup. Consider using libraries like Socket.io or custom hooks for WebSocket state.
What are the strategies for state caching and memoization?
Use useMemo for expensive computations, implement proper cache invalidation strategies, leverage browser storage for persistence, and consider using caching libraries like react-query for server state.
How do you handle state in animations and transitions?
Use state for controlling animation triggers, implement proper cleanup for animation timeouts, consider using libraries like Framer Motion or React Spring, and handle edge cases during component unmounting.
What are the three main phases of a React component's lifecycle?
The three main phases are: Mounting (component is created and inserted into DOM), Updating (component re-renders due to prop or state changes), and Unmounting (component is removed from DOM). Each phase has associated lifecycle methods or hooks.
How does useEffect hook relate to component lifecycle methods?
useEffect combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount. The effect runs after render, and its cleanup function (if returned) runs before unmount and before re-running the effect.
What is the purpose of the componentDidMount lifecycle method and its Hook equivalent?
componentDidMount executes after the component mounts to the DOM. It's used for initial setup like API calls, subscriptions, or DOM manipulations. In hooks, this is achieved using useEffect with an empty dependency array: useEffect(() => {}, []).
How does the cleanup function in useEffect work and when is it called?
The cleanup function runs before the component unmounts and before every re-render with changed dependencies. It's used to clean up subscriptions, event listeners, or timers to prevent memory leaks. Return a cleanup function from useEffect to implement it.
What is the difference between useEffect and useLayoutEffect?
useEffect runs asynchronously after render completion, while useLayoutEffect runs synchronously before browser paint. useLayoutEffect is used for DOM measurements and mutations that need to be synchronized with rendering to prevent visual flicker.
How do you handle side effects in different lifecycle phases?
Use useEffect with appropriate dependency arrays: empty array for mount-only effects, specific dependencies for update effects, no array for every render, and cleanup function for unmount effects. Consider using multiple useEffect hooks to separate concerns.
What is the purpose of getDerivedStateFromProps and how can it be handled with Hooks?
getDerivedStateFromProps updates state based on prop changes. With hooks, use useEffect to observe prop changes and update state accordingly, but consider if derived state is really needed versus computing values during render.
How do you optimize component updates using lifecycle methods or hooks?
In class components, use shouldComponentUpdate or extend PureComponent. In functional components, use React.memo for props comparison and useMemo/useCallback to prevent unnecessary re-renders of child components.
What are the common pitfalls in useEffect dependencies?
Common pitfalls include: missing dependencies leading to stale closures, infinite loops from mutable values, unnecessary re-renders from object/array dependencies, and over-dependency on external values. Use ESLint rules and proper dependency management.
How do you handle errors in different lifecycle phases?
Use componentDidCatch and getDerivedStateFromError in class components for error boundaries. In functional components, use try-catch in event handlers and effects. Consider error boundary components for declarative error handling.
What is the significance of the componentWillUnmount method and its Hook equivalent?
componentWillUnmount handles cleanup before component removal. In hooks, return a cleanup function from useEffect to achieve the same. Use it to remove event listeners, cancel subscriptions, and clear timers to prevent memory leaks.
How do lifecycle methods and hooks handle async operations?
Both can initiate async operations but require different patterns. Class methods need mounted flags for safety, while hooks can use cleanup functions to cancel pending operations. Consider race conditions and component unmounting.
What is the role of the constructor in class components and its Hook alternative?
Constructor initializes state and binds methods in class components. In functional components, useState and useCallback replace these roles. Initial state can be set directly with useState, and function definitions handle method binding.
How do you implement component initialization patterns with hooks?
Use useState with initialization function for expensive computations, useEffect with empty dependency array for setup, and useMemo for computed initial values. Consider lazy initialization patterns to optimize performance.
What are the best practices for handling subscriptions in component lifecycle?
Set up subscriptions in componentDidMount or useEffect, clean up in componentWillUnmount or effect cleanup function. Handle subscription updates in componentDidUpdate or through effect dependencies. Ensure proper cleanup to prevent memory leaks.
How do you manage timers and intervals throughout the component lifecycle?
Set up timers in componentDidMount or useEffect, clear them in componentWillUnmount or cleanup function. Use state or refs to track timer IDs. Ensure proper cleanup to prevent memory leaks and unexpected behavior.
What are the implications of the strict mode on component lifecycle?
Strict mode double-invokes certain lifecycle methods and hooks to help identify side effects. This includes constructor, render, and useEffect. Use it to catch lifecycle-related bugs and ensure proper cleanup implementation.
How do you handle DOM measurements in the component lifecycle?
Use componentDidMount or useLayoutEffect for DOM measurements to ensure the DOM is ready. Store measurements in state or refs. Consider resize observers and window event listeners with proper cleanup.
What are the patterns for conditional side effects in lifecycle methods?
Use conditional logic inside effects or lifecycle methods, or split into multiple effects with different dependency arrays. Consider extracting complex conditions into separate functions for better maintainability.
How do you debug lifecycle-related issues?
Use console logs in lifecycle methods/effects, React DevTools for component mounting/updating visualization, and effect hooks lint rules. Implement proper error boundaries and logging for lifecycle events.
What is the impact of Suspense on component lifecycle?
Suspense can interrupt component mounting and trigger fallback rendering. Effects may be delayed or re-run. Consider the implications for data fetching, lazy loading, and error handling in lifecycle methods and effects.
How do you handle prop changes throughout the component lifecycle?
Use componentDidUpdate or useEffect with appropriate dependencies to react to prop changes. Consider memoization with useMemo for derived values and proper dependency array management in effects.
What are the considerations for state updates during different lifecycle phases?
Avoid state updates in render phase. Use componentDidMount/Update or effects for async state updates. Consider batching updates and proper error handling. Be aware of setState's asynchronous nature.
How do you implement animation triggers in the component lifecycle?
Trigger animations in componentDidMount/Update or useEffect. Handle cleanup in unmount phase. Consider using refs for DOM access and proper timing coordination with React's lifecycle.
What are the patterns for handling focus management in the component lifecycle?
Manage focus in componentDidMount/Update or useEffect. Use refs for DOM element access. Consider accessibility implications and proper cleanup of focus-related effects.
How do you manage resource preloading in the component lifecycle?
Implement preloading in componentDidMount or useEffect with empty dependency array. Consider using Suspense for data fetching and lazy loading. Handle cleanup for abandoned preload requests.
What are the best practices for handling websocket connections in lifecycle methods?
Establish connections in componentDidMount or useEffect, handle reconnection logic in componentDidUpdate or with dependencies, and clean up in componentWillUnmount or effect cleanup. Consider connection state management.
How do you handle component persistence throughout lifecycle changes?
Implement storage updates in effects or lifecycle methods, handle rehydration on mount, and clean up on unmount. Consider using localStorage/sessionStorage with proper serialization and cleanup.
What are the patterns for managing multiple effects in a component?
Split effects by concern, manage dependencies independently, consider effect ordering, and implement proper cleanup for each effect. Use custom hooks to encapsulate related effect logic.
What are the Rules of Hooks and why are they important?
The Rules of Hooks are: 1) Only call hooks at the top level (not inside loops, conditions, or nested functions), 2) Only call hooks from React function components or custom hooks. These rules ensure hooks maintain their state and order between renders.
What's the difference between useMemo and useCallback hooks?
useMemo memoizes a computed value and returns it, while useCallback memoizes a function definition. useMemo is used for expensive calculations, while useCallback is used for function props to prevent unnecessary re-renders of child components.
How do you create a custom hook and what are the naming conventions?
Custom hooks are functions that use other hooks and must start with 'use' (e.g., useCustomHook). They allow you to extract component logic into reusable functions. Custom hooks can return any values and should follow the Rules of Hooks.
What is the useRef hook and what are its common use cases?
useRef returns a mutable ref object that persists across renders. Common uses include: accessing DOM elements directly, storing previous values, and holding mutable values that don't trigger re-renders. The .current property can be modified without causing re-renders.
How does useReducer differ from useState and when should you use it?
useReducer is preferable for complex state logic involving multiple values or when next state depends on previous state. It follows a Redux-like pattern with actions and reducers, making state transitions more predictable and easier to test.
What is the purpose of the useImperativeHandle hook?
useImperativeHandle customizes the instance value exposed to parent components when using ref. It allows you to control which values and methods are accessible via the ref, enabling better encapsulation of component internals.
How do you optimize performance with useMemo and useCallback?
Use useMemo for expensive calculations and useCallback for function props passed to optimized child components. Ensure dependency arrays are properly configured. Only use when there's a measurable performance benefit to avoid unnecessary complexity.
What is the useContext hook and how does it work with React Context?
useContext subscribes to context changes and returns the current context value. It provides a simpler way to consume context compared to Context.Consumer. Components using useContext will re-render when the context value changes.
How do you handle async operations in useEffect?
Define an async function inside useEffect and call it, or use IIFE. Handle cleanup properly for ongoing operations. Consider race conditions and component unmounting. Don't make the useEffect callback itself async.
What is the useLayoutEffect hook and when should it be used instead of useEffect?
useLayoutEffect fires synchronously after DOM mutations but before browser paint. Use it when you need to make DOM measurements or mutations that should be synchronized with rendering to prevent visual flickers.
How do you implement a custom hook for form handling?
Create a custom hook that manages form state, validation, submission, and error handling using useState or useReducer. Return form state, handlers, and utility methods. Consider validation timing and form reset functionality.
What are the patterns for sharing stateful logic between components using hooks?
Create custom hooks that encapsulate the shared logic, state, and side effects. Ensure hooks are generic enough for reuse but specific enough to be useful. Consider composition of multiple hooks for complex logic.
How do you handle cleanup in custom hooks?
Return cleanup functions from useEffect within custom hooks. Clear timeouts, cancel subscriptions, and remove event listeners. Ensure all resources are properly cleaned up to prevent memory leaks.
What is the useDebugValue hook and when should it be used?
useDebugValue adds a label to custom hooks in React DevTools. Use it to display custom hook values for debugging. Consider using the format function parameter to defer expensive formatting until the hook is inspected.
How do you implement a hook for managing window events?
Create a custom hook that adds event listeners in useEffect and removes them in cleanup. Consider debouncing or throttling events, and use useCallback for event handlers to maintain referential equality.
What are the common pitfalls when using the dependency array in hooks?
Common pitfalls include: missing dependencies leading to stale closures, unnecessary dependencies causing excess renders, object/array dependencies causing infinite loops, and circular dependencies. Use ESLint rules and proper dependency management.
How do you implement pagination logic using hooks?
Create a custom hook that manages page state, items per page, and total pages using useState. Include methods for page navigation and data fetching. Consider caching results and implementing infinite scroll.
What is the pattern for implementing debouncing with hooks?
Use useCallback and useRef to create a debounced function that delays execution. Clear previous timeout in cleanup. Consider returning both debounced and immediate execution functions.
How do you handle error boundaries with hooks?
Since error boundaries must be class components, create a custom hook that works with an error boundary component. Use try-catch in event handlers and effects. Consider implementing retry logic and error logging.
What is the pattern for implementing undo/redo functionality with hooks?
Use useReducer to manage state history array and current index. Implement actions for undo, redo, and new states. Consider memory usage and limiting history size for large state objects.
How do you implement data fetching patterns with hooks?
Create custom hooks for data fetching using useState and useEffect. Handle loading, error, and success states. Consider caching, request cancellation, and retry logic. Use libraries like react-query for complex cases.
What are the patterns for managing WebSocket connections with hooks?
Create a custom hook that establishes connection in useEffect, handles message events, and cleans up on unmount. Consider reconnection logic, message queuing, and connection status management.
How do you implement localStorage persistence with hooks?
Create a custom hook that syncs state with localStorage using useEffect. Handle serialization/deserialization, storage events for cross-tab synchronization, and fallbacks for when storage is unavailable.
What are the patterns for implementing authentication with hooks?
Create custom hooks for managing auth state, token storage, and user session. Handle login, logout, token refresh, and protected routes. Consider persistent sessions and security implications.
How do you implement infinite scroll with hooks?
Create a custom hook that manages scroll position, loading state, and data fetching. Use intersection observer or scroll events. Consider data caching, cleanup, and performance optimization.
What is the pattern for implementing form validation with hooks?
Create custom hooks for validation logic using useState or useReducer. Handle field-level and form-level validation, async validation, and error messages. Consider validation timing and performance.
How do you implement theme switching with hooks?
Create a custom hook that manages theme state using useState and useContext. Handle theme persistence, dynamic style application, and system preference detection. Consider performance and SSR implications.
What are the patterns for implementing keyboard shortcuts with hooks?
Create a custom hook that manages keyboard event listeners using useEffect. Handle key combinations, prevent default behaviors, and clean up listeners. Consider focus management and accessibility.
How do you implement state machine patterns with hooks?
Use useReducer with a state machine configuration. Define states, transitions, and actions. Consider using libraries like XState. Handle side effects and state persistence.
What are props in React and how do they facilitate data flow?
Props (properties) are read-only data passed from parent to child components. They enable unidirectional data flow, making the application's data flow predictable and easier to debug. Props can include any JavaScript value including functions.
What is prop drilling and what are the ways to avoid it?
Prop drilling occurs when props are passed through multiple intermediate components that don't need them. Solutions include using Context API, state management libraries like Redux, component composition, or custom hooks to avoid excessive prop passing.
How do you handle default props in functional and class components?
In functional components, use default parameters: function Component({prop = defaultValue}). In class components, use static defaultProps property. Default props ensure components work even when optional props aren't provided.
What is the role of PropTypes in React and how are they implemented?
PropTypes provide runtime type checking for props. They help catch bugs by validating the types and presence of props. Example: Component.propTypes = { name: PropTypes.string.isRequired }. In TypeScript, use interfaces or types instead.
How do you implement two-way data binding in React?
React uses one-way data flow, but two-way binding can be simulated by passing both a value prop and an onChange handler. Common in form inputs: <input value={value} onChange={e => setValue(e.target.value)} />.
What are render props and how do they enable component reuse?
Render props are functions passed as props that return React elements. They enable sharing behavior between components: <DataProvider render={data => <Display data={data} />}. This pattern allows for flexible component composition.
How do you handle prop changes in lifecycle methods and hooks?
In class components, use componentDidUpdate to compare prevProps with current props. In functional components, use useEffect with prop dependencies to react to changes: useEffect(() => { /* handle prop change */ }, [prop]).
What is the children prop and how is it used for composition?
children is a special prop that contains the content between component tags. It enables component composition: <Container>{content}</Container>. Can be manipulated using React.Children utilities and supports any valid JSX.
How do you implement prop validation for complex data structures?
Use PropTypes.shape() for objects, PropTypes.arrayOf() for arrays, and custom validators for complex validation. Example: PropTypes.shape({ id: PropTypes.number, items: PropTypes.arrayOf(PropTypes.object) }).
What are Higher-Order Components (HOCs) and how do they handle props?
HOCs are functions that take a component and return an enhanced component. They can manipulate props, add new props, or handle prop-related logic. Important to properly forward props: {...props} to avoid prop isolation.
How do you optimize component re-renders based on prop changes?
Use React.memo for functional components or PureComponent for class components to prevent unnecessary re-renders. Implement shouldComponentUpdate for custom comparison. Consider prop structure and reference equality.
What are the patterns for handling event handlers as props?
Pass event handlers as props using arrow functions or bound methods. Consider performance implications of inline functions. Use callback refs for DOM element access. Maintain proper binding context.
How do you handle prop types in TypeScript with React?
Define interfaces or types for props: interface Props { name: string; age?: number; }. Use them in component definitions: const Component: React.FC<Props> = ({name, age}) => {}. TypeScript provides compile-time type safety.
What is the Context API and how does it complement props?
Context provides a way to pass data through the component tree without explicit prop passing. Useful for global data like themes, user data, or locale. Components can consume context using useContext hook.
How do you handle async data flow with props?
Pass loading states and error states as props along with data. Use promises or async/await in parent components. Consider implementing loading skeletons or error boundaries. Handle race conditions in updates.
What are the best practices for organizing and naming props?
Use descriptive names, follow consistent conventions, group related props, document prop types and requirements. Consider prop grouping for complex components. Use spread operator judiciously.
How do you implement controlled vs uncontrolled components?
Controlled components receive values and handlers as props, while uncontrolled components manage internal state with refs. Choose based on need for form data access and validation requirements.
What are compound components and how do they use props?
Compound components are related components that work together sharing implicit state. They often use Context internally while exposing a declarative API through props. Example: <Select><Option value='1'>One</Option></Select>.
How do you handle prop updates in animations and transitions?
Use useEffect to watch for prop changes and trigger animations. Consider using libraries like Framer Motion. Handle cleanup of animation timeouts. Manage transition states properly.
What are the patterns for implementing prop callbacks?
Pass callbacks as props for child-to-parent communication. Use useCallback for memoization. Consider timing of callback execution and cleanup. Handle error cases and loading states.
How do you handle derived state from props?
Prefer computing values during render instead of storing in state. Use useMemo for expensive calculations. If state is needed, update it in useEffect. Consider getDerivedStateFromProps in class components.
What are the strategies for testing props and data flow?
Test prop type validation, default props, component rendering with different props, event handlers, and edge cases. Use Jest and React Testing Library. Mock complex props and test error conditions.
How do you implement prop-based conditional rendering?
Use props in conditional statements, ternary operators, or logical && operator. Handle loading/error states. Consider extract complex conditions to separate functions. Use proper TypeScript types.
What are the patterns for handling immutable props?
Never modify props directly. Create new objects/arrays when updating. Use immutable update patterns or libraries like Immer. Consider performance implications of deep cloning.
How do you handle prop validation errors in production?
Remove PropTypes in production builds for performance. Implement error boundaries for runtime errors. Consider logging prop validation errors. Use TypeScript for compile-time validation.
What are the patterns for implementing prop transformations?
Transform props in render method or custom hooks. Consider memoization for expensive transformations. Handle edge cases and invalid data. Document transformation logic.
How do you handle circular prop dependencies?
Avoid circular prop passing. Restructure component hierarchy. Consider using Context or state management. Break circular dependencies through component composition.
What are the best practices for documenting props?
Use JSDoc comments, PropTypes, or TypeScript interfaces. Document required vs optional props, default values, and examples. Consider using Storybook for interactive documentation.
How do you implement prop-based code splitting?
Use dynamic imports based on props. Implement proper loading states. Handle errors during chunk loading. Consider performance implications and bundle size.
What are the patterns for handling sensitive data in props?
Never expose sensitive data in client-side props. Use proper authentication and authorization. Consider encryption for necessary client-side data. Implement proper cleanup.
What are synthetic events in React and how do they differ from native DOM events?
Synthetic events are React's cross-browser wrapper around native DOM events. They provide consistent behavior across browsers, follow the W3C spec, and use a pooling mechanism for performance. Access native events via event.nativeEvent property.
How do you properly bind event handlers in React components?
Methods include: arrow functions in render, class fields with arrow functions, binding in constructor, or using function components with hooks. Each approach has performance and readability trade-offs. Example: onClick={() => this.handleClick()} or onClick={this.handleClick.bind(this)}.
What is event delegation in React and how is it implemented?
Event delegation handles events at a higher level in the DOM tree rather than individual elements. React implements this automatically through its event system. Benefits include better memory usage and handling dynamic elements.
How do you handle form events in React?
Form events (onChange, onSubmit) are handled using controlled components where form data is controlled by React state. Prevent default form submission with e.preventDefault(). Handle validation and submission logic in event handlers.
What are the best practices for handling async operations in event handlers?
Use async/await or promises, handle loading and error states, prevent memory leaks with cleanup, consider debouncing/throttling, and handle component unmounting. Example: async handleClick() { try { await apiCall() } catch (error) { handleError() } }
How do you implement event propagation control in React?
Use stopPropagation() to prevent event bubbling, preventDefault() to prevent default behavior, and capture phase events with onClickCapture. Example: onClick={(e) => { e.stopPropagation(); handleClick(); }}
What are custom events in React and how do you create them?
Custom events can be created using new CustomEvent() and dispatched using dispatchEvent(). In React, prefer prop callbacks or event emitters for component communication. Handle cleanup for custom event listeners.
How do you handle keyboard events in React?
Use onKeyDown, onKeyPress, onKeyUp events. Check event.key or event.keyCode for specific keys. Consider accessibility, focus management, and keyboard shortcuts. Handle modifier keys (Ctrl, Alt, Shift) appropriately.
What are the patterns for handling drag and drop events?
Use HTML5 drag and drop events (onDragStart, onDrop, etc.). Implement dataTransfer for data passing. Consider using react-dnd or similar libraries for complex cases. Handle drag preview and drop zones.
How do you implement event handling with hooks?
Use useCallback for memoized event handlers, useEffect for event listener setup/cleanup, and useState for handling event state. Example: const handleClick = useCallback(() => setState(newValue), [dependencies]).
What are the considerations for handling mobile touch events?
Handle touchstart, touchmove, touchend events. Consider touch gestures, preventing scroll during touch interactions, and handling multi-touch. Test on various devices and implement fallbacks for desktop.
How do you implement debouncing and throttling for event handlers?
Use custom hooks or utility functions for debounce/throttle. Consider cleanup on unmount. Example: const debouncedHandler = useDebounce(handler, delay). Handle edge cases and cancellation.
What are the patterns for handling global events in React?
Add listeners to window/document in useEffect, implement proper cleanup, consider context for sharing event handlers, and handle event delegation appropriately. Example: window.addEventListener('resize', handler).
How do you handle file upload events in React?
Use input type='file' with onChange event. Access files through event.target.files. Handle multiple files, file validation, progress events, and error cases. Consider using FormData for uploads.
What are the best practices for error handling in events?
Implement try-catch blocks, use error boundaries for component errors, handle async errors properly, provide user feedback, and log errors appropriately. Consider graceful degradation and recovery.
How do you handle focus and blur events for accessibility?
Use onFocus and onBlur events, manage focus state, implement keyboard navigation, and follow ARIA guidelines. Consider focus trapping for modals and proper tab order.
What are the patterns for handling nested event handlers?
Use event.stopPropagation() to prevent bubbling, organize handlers hierarchically, consider event delegation, and handle event order carefully. Avoid deeply nested event handling logic.
How do you test event handlers in React components?
Use React Testing Library or Enzyme to simulate events, test handler behavior, verify state changes, and check component updates. Mock complex event objects and test error scenarios.
What are the considerations for handling WebSocket events?
Set up WebSocket connections in useEffect, handle connection events, implement proper cleanup, and manage message events. Consider reconnection logic and error handling.
How do you implement custom event hooks?
Create hooks that encapsulate event logic, handle setup/cleanup, manage event state, and provide simple interfaces. Example: useEventListener hook for declarative event handling.
What are the patterns for handling scroll events efficiently?
Use throttling or requestAnimationFrame for scroll handlers, consider intersection observer for scroll detection, and implement cleanup properly. Handle scroll position restoration and virtual scrolling.
How do you handle clipboard events in React?
Use onCopy, onCut, onPaste events, handle clipboard API permissions, implement fallbacks for unsupported browsers, and consider security implications. Handle different data types in clipboard.
What are the best practices for handling form submission events?
Prevent default submission, validate inputs, handle async submission, show loading/error states, and manage form state properly. Consider multi-step forms and partial submissions.
How do you implement event handling for animations?
Handle animation start/end events, manage animation state, implement cleanup for interrupted animations, and consider performance. Use requestAnimationFrame for smooth animations.
What are the patterns for handling media events?
Handle play, pause, loadeddata, error events for audio/video elements. Implement proper cleanup, manage playback state, and handle loading/buffering. Consider mobile device considerations.
How do you handle events in portals?
Events bubble up through React's virtual DOM hierarchy regardless of portal placement. Consider event propagation, handle cleanup properly, and manage portal lifecycle.
What are the considerations for handling events in SSR?
Handle hydration mismatches, avoid accessing window/document during SSR, implement proper event attachment after hydration, and consider initial state handling.
How do you implement event pooling optimization?
React 17+ removed event pooling, but understanding includes: using event.persist() for async access in older versions, handling synthetic event limitations, and managing event object lifecycle.
What are the patterns for handling intersection observer events?
Create custom hooks for intersection observer, handle observer setup/cleanup, manage intersection state, and implement proper threshold configuration. Use for infinite scroll or lazy loading.
What is React Router and why is it used?
React Router is a standard routing library for React that enables navigation between views in a React application. It provides components for handling routing declaratively, enabling the creation of single-page applications with multiple views and clean URLs.
What is the difference between BrowserRouter and HashRouter?
BrowserRouter uses HTML5 history API and creates clean URLs (/about), while HashRouter uses URL hash (/#/about). BrowserRouter requires server configuration for direct URL access, while HashRouter works without it but has less clean URLs.
How do you implement protected routes in React Router?
Create a custom Route component that checks authentication status and either renders the protected component or redirects to login. Implement using Route's render prop or a higher-order component pattern.
What is the purpose of the Switch component?
Switch renders the first Route or Redirect that matches the current location exclusively. It prevents multiple routes from rendering simultaneously and provides exclusive routing.
How do you handle route parameters?
Use Route path with parameter syntax (:param), access parameters via useParams hook or match.params. Example: <Route path='/user/:id' /> and const { id } = useParams();
What are nested routes and how do you implement them?
Nested routes are routes rendered inside other routes. Implement by nesting Route components or using path composition. Handle proper path matching and component hierarchy.
How do you programmatically navigate using React Router?
Use useHistory hook or withRouter HOC. Methods include history.push(), history.replace(), and history.goBack(). Consider state preservation and proper navigation flows.
What is route-based code splitting and how is it implemented?
Use React.lazy and Suspense with React Router to load components dynamically. Implement per-route code splitting for better performance and smaller initial bundle size.
How do you handle 404 pages?
Create a catch-all route at the end of Switch using path='*' or no path prop. Render a 404 component for unmatched routes. Consider user experience and navigation options.
What is the useLocation hook used for?
useLocation provides access to the current location object containing pathname, search params, and hash. Useful for accessing query parameters and implementing location-based features.
How do you implement route transitions?
Use React Transition Group with React Router. Implement enter/exit animations, handle route-based transitions, and manage transition states properly.
What is the purpose of the exact prop?
exact ensures the path matches exactly the current URL. Without exact, '/users' would match '/users/new'. Use for precise route matching and preventing partial matches.
How do you handle query parameters?
Use URLSearchParams or custom hooks with useLocation. Parse and manage query parameters, handle updates, and maintain query parameter state.
What is server-side rendering with React Router?
Use StaticRouter instead of BrowserRouter for SSR. Handle location context, match routes on server, and manage data loading. Consider hydration and state management.
How do you implement breadcrumbs?
Use route configuration and current location to generate breadcrumbs. Handle dynamic segments, maintain breadcrumb state, and implement proper navigation.
What is the NavLink component?
NavLink is a special version of Link that can be styled when it matches the current URL. Useful for navigation menus and indicating active routes.
How do you handle route-based layouts?
Implement layout components with nested routes. Handle different layouts per route section, manage common elements, and handle transitions.
What is the useRouteMatch hook?
useRouteMatch attempts to match the current URL like a Route would. Useful for nested routes and conditional rendering based on route matches.
How do you handle route guards?
Implement higher-order components or custom Route components for protection. Handle authentication, authorization, and redirect flows appropriately.
What is the Prompt component?
Prompt prevents navigation when certain conditions are met. Used for unsaved form data or pending operations. Implement custom confirmation dialogs.
How do you handle scroll restoration?
Implement custom scroll behavior using useEffect. Handle scroll position per route, manage scroll restoration, and implement smooth scrolling.
What are route config objects?
Route configurations are objects defining route paths, components, and nested routes. Use for centralized route management and dynamic route generation.
How do you handle route-based code splitting with prefetching?
Implement React.lazy with prefetching strategies. Handle component preloading, manage loading states, and optimize performance.
What is memory router?
MemoryRouter keeps history in memory (not in URL). Useful for testing and non-browser environments. Maintains routing state without URL changes.
How do you handle route-based data loading?
Implement data loading in route components or through route handlers. Handle loading states, errors, and data dependencies between routes.
What are relative links in React Router?
Relative links are paths relative to the current route. Use them for nested navigation and maintaining route hierarchy. Handle proper path resolution.
How do you test routing logic?
Use MemoryRouter for testing, mock route matches and history. Test navigation, protected routes, and route parameters. Implement comprehensive test cases.
What is route-based authentication?
Implement authentication checks in route components or guards. Handle login flows, session management, and protected route access.
How do you handle route-based meta tags?
Use React Helmet or similar libraries. Update meta tags per route, handle dynamic content, and manage SEO requirements.
What is the Context API in React and what problem does it solve?
Context API provides a way to pass data through the component tree without having to pass props manually at every level. It solves prop drilling issues and enables global state management for specific data that needs to be accessed by many components.
What are the core components of Context API?
The core components are: React.createContext() to create a context, Context.Provider to wrap components that need access to the context value, and Context.Consumer or useContext hook to consume the context value.
How do you create and provide a context?
Create context using React.createContext(defaultValue) and provide it using the Provider component: <MyContext.Provider value={value}>{children}</MyContext.Provider>. The value prop can be any JavaScript value.
What is the difference between useContext and Context.Consumer?
useContext is a hook that provides a cleaner way to consume context in functional components. Context.Consumer uses render props pattern and is mainly used in class components or when you need to consume multiple contexts in a single component.
How do you handle updates in Context?
Pass functions through context to update values, use state management with context, ensure proper value memoization. Consider performance implications of context updates and implement proper provider structure.
What are the performance implications of using Context?
Context triggers re-renders in all consuming components when its value changes. Optimize by splitting contexts, using memoization, and considering component structure. Avoid putting frequently changing values in context.
How do you implement multiple contexts?
Create separate contexts for different concerns, nest providers, and consume contexts independently. Consider context composition and proper separation of concerns.
What is the default value in createContext and when is it used?
Default value is used when a component consumes context but isn't wrapped in a provider. It's useful for testing, default states, and fallback values. Should represent valid context state.
How do you optimize context with memo?
Use React.memo on consuming components, memoize context value with useMemo, implement proper value comparison. Consider component structure and update patterns.
What are context selectors and how do you implement them?
Context selectors help consume specific parts of context to prevent unnecessary re-renders. Implement using custom hooks, memoization, and proper state structure.
How do you handle context in class components?
Use static contextType for single context or Context.Consumer for multiple contexts. Access context through this.context or render props pattern.
What are the patterns for combining Context with Reducers?
Use useReducer with Context for complex state management, implement proper action dispatching, handle state updates efficiently. Similar to Redux pattern but lighter weight.
How do you test components using Context?
Wrap components in test providers, mock context values, test context updates and consumer behavior. Consider using testing utilities and proper test setup.
What are the best practices for context value structure?
Keep context values focused and minimal, separate state and updaters, consider memoization needs. Structure context based on usage patterns and update frequency.
How do you handle async operations with Context?
Combine Context with useEffect for async operations, handle loading and error states, implement proper state updates. Consider async patterns and error boundaries.
What is context composition and when should you use it?
Compose multiple contexts to separate concerns, improve maintainability, and optimize performance. Use when different parts of the app need different subsets of global state.
How do you handle context initialization?
Initialize context with meaningful default values, consider lazy initialization, handle initial state properly. Implement proper type checking and documentation.
What are the common pitfalls when using Context?
Overusing context, unnecessary re-renders, improper value memoization, context hell (too many nested providers). Consider alternatives and proper architecture.
How do you implement theming with Context?
Create theme context, provide theme values, implement theme switching, handle dynamic themes. Consider performance and SSR implications.
What are the patterns for handling form state with Context?
Use context for form state management, implement proper validation, handle field updates efficiently. Consider form complexity and performance requirements.
How do you handle context in TypeScript?
Define proper types for context values, use generic types when needed, implement type checking. Consider type safety and proper interface definitions.
What is the relationship between Context and Props?
Context complements props by providing a way to share values without explicit passing. Use context for truly global state, props for component-specific data.
How do you handle context persistence?
Implement storage synchronization, handle hydration, manage persistence lifecycle. Consider storage options and state reconciliation.
What are the patterns for handling authentication with Context?
Store auth state in context, handle auth flows, implement proper security measures. Consider token management and session handling.
How do you implement error handling in Context?
Use error boundaries with context, handle error states, implement proper error propagation. Consider error recovery and user feedback.
What are the best practices for context naming and organization?
Use clear naming conventions, organize contexts by feature/domain, implement proper file structure. Consider maintainability and scalability.
How do you handle context cleanup and disposal?
Implement proper cleanup in effects, handle unmount scenarios, manage resource disposal. Consider memory leaks and cleanup timing.
What are the patterns for handling dynamic contexts?
Create contexts dynamically, handle context creation lifecycle, manage dynamic providers. Consider performance and maintenance implications.
How do you document context usage and APIs?
Document context purpose, value structure, update patterns, and usage examples. Consider documentation maintainability and clarity.
What are Error Boundaries in React and why are they used?
Error Boundaries are React components that catch JavaScript errors in their child component tree and display fallback UI. They prevent the entire app from crashing and provide a way to gracefully handle runtime errors.
How do you implement an Error Boundary component?
Create a class component that implements either getDerivedStateFromError() or componentDidCatch() lifecycle methods. getDerivedStateFromError() renders fallback UI, while componentDidCatch() handles error logging.
What types of errors can't be caught by Error Boundaries?
Error Boundaries don't catch errors in event handlers, asynchronous code (setTimeout/requestAnimationFrame), server-side rendering, or errors thrown in the error boundary itself. These require different error handling approaches.
How do you handle errors in event handlers?
Use try-catch blocks in event handlers, implement proper error handling and state updates, provide user feedback. Consider global error handling for uncaught errors in events.
What are the best practices for error reporting in React?
Implement proper error logging services, collect relevant error context, handle different error types appropriately, maintain user privacy. Consider environment-specific logging strategies.
How do you handle async errors in React components?
Use try-catch with async/await, implement proper error states, handle promise rejections, use error boundaries where applicable. Consider loading states and user feedback.
What is the role of componentDidCatch lifecycle method?
componentDidCatch captures error information and error stack traces. Used for error logging, analytics, and side effects in error handling. Cannot modify state during render phase.
How do you implement error recovery mechanisms?
Implement retry logic, state reset mechanisms, fallback UI, and proper error clearing. Consider user experience and recovery workflows.
What are the patterns for handling network errors?
Implement proper error status handling, retry mechanisms, offline detection, and user feedback. Consider caching strategies and fallback content.
How do you handle errors in React hooks?
Use try-catch in effects, implement error states, handle cleanup properly, consider custom hooks for error handling. Cannot use error boundaries directly in hooks.
What are the strategies for handling form validation errors?
Implement client-side validation, handle server validation errors, provide clear error messages, manage error states properly. Consider UX and accessibility.
How do you handle errors in Redux/state management?
Implement error reducers, handle async action errors, provide error states in store, consider middleware for error handling. Handle global vs local error states.
What are the best practices for error boundary placement?
Place boundaries strategically to isolate failures, consider component hierarchy, implement granular error handling. Balance between too many and too few boundaries.
How do you handle errors in React Suspense?
Use Error Boundaries with Suspense, handle loading errors, implement fallback UI, manage timeout scenarios. Consider data fetching errors.
What are the patterns for error handling in HOCs?
Implement error handling logic in HOCs, wrap components with error boundaries, handle prop validation errors. Consider composition of error handling HOCs.
How do you handle errors in React portals?
Use error boundaries around portals, handle portal-specific errors, manage cleanup on errors. Consider modal and overlay error scenarios.
What are the strategies for handling initialization errors?
Handle app bootstrap errors, implement fallback content, manage configuration errors, provide meaningful error messages. Consider recovery options.
How do you implement graceful degradation in error scenarios?
Provide fallback functionality, implement feature detection, handle browser compatibility issues. Consider progressive enhancement approaches.
What are the patterns for handling route errors?
Implement route-level error boundaries, handle navigation errors, provide error pages, manage route transitions. Consider deep linking errors.
How do you handle errors in server-side rendering?
Implement SSR-specific error handling, manage hydration errors, handle state reconciliation issues. Consider client-server error differences.
What are the best practices for error message design?
Provide clear, actionable error messages, implement proper i18n, consider user experience, maintain consistency. Handle different error types appropriately.
How do you handle memory leaks and cleanup errors?
Implement proper cleanup in useEffect, handle component unmounting, manage resource disposal. Consider async operation cancellation.
What are the patterns for handling validation errors in forms?
Implement field-level and form-level validation, handle async validation, provide immediate feedback. Consider UX and accessibility requirements.
How do you handle errors in data fetching?
Implement proper error states, handle network failures, manage retry logic, provide user feedback. Consider caching and offline scenarios.
What are the strategies for error monitoring in production?
Implement error tracking services, collect error metrics, analyze error patterns, set up alerts. Consider privacy and performance implications.
How do you handle errors in third-party components?
Wrap third-party components in error boundaries, handle integration errors, implement fallbacks. Consider version compatibility issues.
What are the patterns for handling authentication errors?
Handle session expiration, implement token refresh, manage unauthorized access, provide proper user feedback. Consider security implications.
How do you implement error tracking and analytics?
Integrate error tracking services, collect relevant error data, implement proper error categorization. Consider privacy and compliance requirements.
What are the best practices for testing error scenarios?
Test error boundaries, simulate different error conditions, verify error recovery, implement comprehensive test cases. Consider edge cases and error combinations.
What are the main testing libraries used in React applications?
Main testing libraries include Jest (test runner and assertion library), React Testing Library (component testing), Enzyme (component testing), Cypress (E2E testing), and React Test Renderer (snapshot testing). Each serves different testing needs and approaches.
What is React Testing Library and what problem does it solve?
React Testing Library is a testing utility that encourages testing components as users would use them. It focuses on testing behavior rather than implementation details, promotes accessibility, and helps write more maintainable tests.
How do you test asynchronous operations in React components?
Use async/await with act(), waitFor(), or findBy queries. Handle promises, timers, and API calls properly. Test loading states, success cases, and error scenarios. Consider cleanup and proper test isolation.
What is snapshot testing and when should it be used?
Snapshot testing captures a serialized version of component output and compares it against future changes. Useful for detecting unintended UI changes, but should be used carefully to avoid brittle tests.
How do you test custom hooks?
Use @testing-library/react-hooks with renderHook, test different scenarios and state changes, verify hook behavior and side effects. Consider proper cleanup and isolation.
What are the best practices for testing event handlers?
Simulate events using fireEvent or userEvent, verify handler calls and state changes, test different event scenarios. Consider proper event cleanup and async operations.
How do you test React components with Redux?
Provide test store using Provider, mock store state and actions, test component integration with Redux. Consider proper store setup and cleanup.
What is the difference between shallow and mount rendering?
Shallow rendering tests component in isolation without rendering child components, while mount rendering fully renders component and children. Each has different use cases and performance implications.
How do you test React Router components?
Use MemoryRouter for testing, mock route params and navigation, test route rendering and transitions. Consider history manipulation and location changes.
What are the patterns for testing forms in React?
Test form submissions, validation logic, error states, and user interactions. Use userEvent for form interactions, verify form state and submissions. Consider accessibility testing.
How do you implement integration tests in React?
Test component interactions, data flow between components, state management integration. Focus on user workflows and feature completeness. Consider proper test isolation.
What are the strategies for testing error boundaries?
Simulate errors to test boundary behavior, verify fallback UI rendering, test error recovery. Consider different error scenarios and component hierarchy.
How do you test context providers and consumers?
Wrap components in test providers, test context updates and consumption, verify context-based rendering. Consider proper context setup and cleanup.
What are the best practices for mocking in React tests?
Mock external dependencies, API calls, and complex functionality. Use jest.mock() appropriately, maintain mock clarity. Consider partial mocking and mock cleanup.
How do you test accessibility in React components?
Use jest-axe for accessibility testing, verify ARIA attributes, test keyboard navigation. Consider screen reader compatibility and accessibility guidelines.
What are the patterns for testing animations and transitions?
Test animation triggers and completion, verify state changes during transitions, mock timers appropriately. Consider animation cleanup and timing issues.
How do you test performance optimizations?
Test render counts, verify memoization effectiveness, check optimization implementations. Consider performance measurement and monitoring in tests.
What are the best practices for test organization?
Group related tests, maintain clear test structure, use proper naming conventions. Consider test maintainability and readability.
How do you test component side effects?
Test useEffect behavior, verify cleanup functions, handle async side effects. Consider proper timing and isolation of side effects.
What are the strategies for testing file uploads?
Mock File API, test upload handlers, verify file validation and processing. Consider different file types and error scenarios.
How do you implement E2E testing in React?
Use Cypress or Playwright for end-to-end testing, test complete user flows, verify application integration. Consider test stability and maintenance.
What are the patterns for testing conditional rendering?
Test different render conditions, verify component visibility, check render logic. Consider edge cases and state combinations.
How do you test React portals?
Test portal rendering and content, verify portal functionality and events. Consider DOM structure and cleanup.
What are the best practices for testing hooks?
Test hook behavior and state changes, verify hook side effects, use appropriate testing utilities. Consider hook lifecycle and cleanup.
How do you test component reusability?
Test components with different props and configurations, verify component flexibility and adaptation. Consider edge cases and prop combinations.
What are the strategies for testing error handling?
Test error scenarios, verify error messages and UI, check error recovery. Consider different types of errors and handling mechanisms.
How do you test React suspense and lazy loading?
Test loading states, verify component lazy loading, check suspense fallbacks. Consider network conditions and timing.
What are the patterns for testing state management?
Test state updates and transitions, verify state synchronization, check state persistence. Consider complex state scenarios and side effects.
How do you implement visual regression testing?
Use tools like Percy or Chromatic, compare visual changes, maintain visual consistency. Consider different viewport sizes and browser compatibility.
What are the different approaches to styling in React applications?
Main approaches include: CSS Modules, Styled Components, CSS-in-JS libraries, traditional CSS/SASS, Tailwind CSS, and inline styles. Each approach has different benefits for scoping, maintainability, and performance.
What are CSS Modules and what problems do they solve?
CSS Modules are CSS files where all class names are scoped locally by default. They solve naming conflicts, provide better encapsulation, and enable modular styling. Each component gets unique class names through compilation.
What is CSS-in-JS and what are its advantages?
CSS-in-JS is writing CSS code within JavaScript. Advantages include dynamic styling, scoped styles, no global namespace pollution, and better integration with component state. Popular libraries include styled-components and emotion.
How do you implement theming in React applications?
Implement theming using CSS variables, styled-components ThemeProvider, or context API. Handle theme switching, maintain consistency, and consider dark mode support. Manage theme variables and inheritance.
What are Styled Components and how do they work?
Styled Components is a CSS-in-JS library that allows writing actual CSS in JavaScript. Components are created with styles attached, supporting props-based styling, theming, and dynamic styles. Styles are scoped to components.
How do you handle responsive design in React?
Use media queries, CSS Grid/Flexbox, responsive units (rem/em), CSS modules for breakpoints, or styled-components media templates. Consider mobile-first approach and component-based responsiveness.
What are the performance implications of different styling approaches?
CSS-in-JS can impact runtime performance, CSS Modules have build-time overhead, inline styles prevent browser optimizations. Consider bundle size, runtime performance, and caching strategies.
How do you implement animations in React?
Use CSS transitions/animations, React Transition Group, Framer Motion, or CSS-in-JS animation props. Consider performance, accessibility, and reduced motion preferences.
What is Tailwind CSS and how does it integrate with React?
Tailwind CSS is a utility-first CSS framework. Integrates through PostCSS, provides utility classes for styling, supports component composition. Requires proper configuration and purging for production.
How do you handle conditional styling in React?
Use template literals, classnames library, CSS modules composition, or styled-components props. Handle dynamic classes and inline styles based on props or state.
What are the best practices for organizing styles in React projects?
Follow component-based organization, maintain consistent naming conventions, use proper file structure, implement style guide. Consider scalability and maintainability.
How do you implement CSS-in-JS with TypeScript?
Use proper type definitions for styled components, implement theme typing, handle prop types for styled components. Consider type safety and proper inference.
What are the approaches to styling third-party components?
Override styles using CSS specificity, use component APIs for customization, implement wrapper components with custom styles. Consider maintainability and upgrades.
How do you implement global styles in React?
Use global CSS files, styled-components createGlobalStyle, CSS custom properties. Handle reset styles, typography, and theme variables. Consider scope and maintainability.
What are the patterns for handling style variants?
Implement variant props, use style composition, create style maps/objects. Handle multiple variations and combinations effectively.
How do you handle CSS specificity in React applications?
Use CSS Modules for scoping, implement proper class naming conventions, manage specificity hierarchy. Consider cascade and inheritance implications.
What are the best practices for handling CSS Grid in React?
Implement responsive grid layouts, use grid areas for component placement, handle dynamic grid structures. Consider fallbacks and browser support.
How do you implement RTL support in React styling?
Use CSS logical properties, implement directional styles, handle bidirectional text properly. Consider cultural differences and layout implications.
What are the approaches to styling forms in React?
Implement consistent form styles, handle input states, manage validation styles. Consider accessibility and user feedback.
How do you handle CSS transitions with React Router?
Implement page transition animations, handle route-based styles, manage transition states. Consider performance and user experience.
What are the patterns for implementing styled system props?
Use style props for component customization, implement consistent prop interfaces, handle style composition. Consider type safety and documentation.
How do you optimize CSS delivery in React applications?
Implement critical CSS, handle code splitting, optimize load performance. Consider caching strategies and resource hints.
What are the approaches to handling CSS-in-JS server-side rendering?
Handle style extraction, implement proper hydration, manage style injection. Consider performance and flash of unstyled content.
How do you implement CSS custom properties with React?
Use CSS variables for dynamic styling, handle theme changes, implement fallbacks. Consider browser support and performance.
What are the best practices for handling mobile-first styling?
Implement progressive enhancement, use appropriate breakpoints, handle touch interactions. Consider device capabilities and constraints.
How do you handle dynamic styling based on data?
Implement data-driven styles, handle dynamic classes and properties, manage style updates. Consider performance and maintainability.
What are the patterns for implementing design tokens?
Define and manage design tokens, implement token-based styling system, handle theme variations. Consider maintainability and consistency.
How do you implement micro-animations and interactions?
Use CSS transitions for subtle animations, implement hover/focus states, handle interaction feedback. Consider performance and accessibility.
What are the approaches to testing styled components?
Test style rendering, verify theme integration, check dynamic styles. Consider snapshot testing and visual regression testing.
What are the key principles of component composition in React?
Key principles include: single responsibility, reusability, proper prop drilling avoidance, composition over inheritance, and proper component hierarchy. Components should be small, focused, and maintainable.
What are the best practices for state management in React?
Keep state as close as needed to components, use appropriate state management tools (Context, Redux) for global state, implement proper state updates, avoid unnecessary state, and consider state normalization.
What are the performance optimization best practices in React?
Use React.memo for expensive components, implement proper key usage, avoid unnecessary re-renders, use proper dependency arrays in hooks, lazy load components, and implement code splitting.
What are the best practices for handling side effects?
Use appropriate hooks (useEffect) for side effects, implement proper cleanup, handle async operations correctly, avoid side effects in render, and maintain clear separation of concerns.
What are the recommended patterns for error handling?
Implement error boundaries, handle async errors properly, provide meaningful error messages, implement proper error logging, and maintain graceful degradation of functionality.
What are the best practices for component testing?
Test component behavior not implementation, use proper testing libraries (RTL), implement meaningful assertions, maintain test isolation, and follow testing pyramid principles.
What are the recommended patterns for prop handling?
Use prop types or TypeScript, implement proper prop validation, avoid excessive props, use proper prop naming, and consider prop drilling alternatives.
What are the best practices for form handling?
Use controlled components when needed, implement proper validation, handle form state efficiently, manage form submissions properly, and consider form library usage for complex forms.
What are the recommended patterns for code organization?
Organize by feature/domain, maintain clear folder structure, implement proper module boundaries, follow consistent naming conventions, and maintain clear component hierarchy.
What are the best practices for handling routing?
Implement proper route organization, handle route guards, implement proper navigation patterns, manage route parameters properly, and consider code splitting by route.
What are the recommended patterns for API integration?
Implement proper data fetching patterns, handle loading and error states, implement caching strategies, maintain proper separation of concerns, and consider API state management.
What are the best practices for accessibility?
Follow ARIA guidelines, implement proper keyboard navigation, maintain proper heading hierarchy, provide proper alt texts, and implement proper focus management.
What are the recommended patterns for styling?
Use appropriate styling solution (CSS Modules, Styled Components), maintain consistent styling patterns, implement proper theme handling, and consider style organization.
What are the best practices for type safety?
Use TypeScript or PropTypes, implement proper type definitions, maintain type consistency, handle type edge cases, and consider type inference optimization.
What are the recommended patterns for state updates?
Use proper state update patterns, handle async state updates correctly, implement proper batching, maintain immutability, and consider state update optimization.
What are the best practices for component lifecycle?
Handle mounting/unmounting properly, implement proper cleanup, manage side effects correctly, handle updates efficiently, and consider performance implications.
What are the recommended patterns for context usage?
Use context appropriately for global state, implement proper provider organization, optimize context updates, avoid context overuse, and consider performance implications.
What are the best practices for code reusability?
Implement proper component composition, create reusable hooks, maintain proper abstraction levels, implement proper HOC patterns, and consider code sharing strategies.
What are the recommended patterns for event handling?
Implement proper event handlers, handle event delegation appropriately, manage event cleanup, optimize event binding, and consider event handling patterns.
What are the best practices for security?
Prevent XSS attacks, handle sensitive data properly, implement proper authentication/authorization, validate inputs, and consider security implications in data handling.
What are the recommended patterns for performance monitoring?
Implement proper performance metrics, use React DevTools effectively, monitor render performance, track user interactions, and consider performance optimization strategies.
What are the best practices for code splitting?
Implement proper lazy loading, use dynamic imports effectively, handle loading states, optimize bundle size, and consider code splitting strategies.
What are the recommended patterns for error boundaries?
Implement strategic error boundary placement, handle error recovery properly, provide meaningful fallback UI, implement proper error logging, and consider error handling strategies.
What are the best practices for dependency management?
Maintain proper dependency versions, handle updates effectively, optimize bundle size, implement proper peer dependencies, and consider dependency management strategies.
What are the recommended patterns for component documentation?
Implement proper JSDoc comments, maintain clear prop documentation, document component usage, provide examples, and consider documentation maintenance strategies.
What are the best practices for internationalization?
Implement proper i18n solution, handle translations effectively, manage locale changes, consider RTL support, and implement proper internationalization patterns.
What are the recommended patterns for state persistence?
Implement proper storage strategies, handle state rehydration, manage persistence lifecycle, consider offline support, and implement proper persistence patterns.
What are the best practices for debugging?
Use React DevTools effectively, implement proper logging, handle error tracking, maintain debugging tools, and consider debugging strategies.
What are the recommended patterns for progressive enhancement?
Implement proper fallbacks, handle feature detection, maintain core functionality, consider browser support, and implement proper enhancement strategies.
What are the best practices for deployment?
Implement proper build process, optimize asset delivery, handle environment variables, implement proper CI/CD, and consider deployment strategies.
What are the different ways to fetch data in React?
Common methods include fetch API, Axios, React Query, SWR, GraphQL clients. Each has different features for handling requests, caching, error handling, and request cancellation.
How do you handle API calls with useEffect?
Use useEffect for API calls, handle cleanup with cancel tokens, manage loading and error states, implement proper dependency array. Consider race conditions and component unmounting.
What is React Query and what problems does it solve?
React Query is a data-fetching library that provides caching, background updates, pagination, and optimistic updates. Solves common issues like cache management, loading states, and server state synchronization.
How do you implement error handling for API calls?
Use try-catch blocks, implement error boundaries, handle different error types, provide user feedback. Consider retry mechanisms and graceful degradation.
What are the best practices for API state management?
Implement proper loading states, handle error cases, manage cache invalidation, consider optimistic updates. Use appropriate state management solutions for API data.
How do you handle authentication with APIs?
Manage tokens securely, handle token refresh, implement interceptors for requests, manage auth state. Consider session management and security implications.
What is SWR and how does it work?
SWR is a React Hooks library for data fetching that implements stale-while-revalidate strategy. Provides automatic revalidation, focus tracking, and interval polling features.
How do you implement request caching?
Use caching libraries (React Query, SWR), implement local storage caching, handle cache invalidation, manage cache lifecycle. Consider cache strategies and freshness.
What are the patterns for handling real-time data?
Implement WebSocket connections, handle Socket.IO integration, manage real-time state updates, handle connection states. Consider reconnection strategies and data consistency.
How do you implement pagination with APIs?
Handle page state, implement infinite scroll or pagination controls, manage loading states, cache paginated data. Consider optimization and user experience.
What are the best practices for API request optimization?
Implement request debouncing/throttling, batch requests when possible, optimize payload size, use proper caching strategies. Consider performance and bandwidth usage.
How do you handle file uploads with APIs?
Use FormData, handle upload progress, implement chunk uploads for large files, manage upload states. Consider validation and error handling.
What are the patterns for handling offline functionality?
Implement service workers, handle offline storage, manage sync queues, handle conflict resolution. Consider offline-first architecture and data synchronization.
How do you implement optimistic updates?
Update UI immediately before API confirmation, handle rollback on failure, manage temporary state, implement proper error recovery. Consider user experience and data consistency.
What are the best practices for API error recovery?
Implement retry mechanisms, handle different error types appropriately, provide fallback content, manage error states. Consider user feedback and recovery options.
How do you handle API request cancellation?
Use AbortController, implement cleanup in useEffect, handle cancel tokens with axios, manage pending requests. Consider race conditions and component lifecycle.
What are the patterns for handling API rate limiting?
Implement request queuing, handle rate limit errors, manage retry strategies, provide user feedback. Consider backend limitations and optimization strategies.
How do you implement API mocking for development?
Use MSW (Mock Service Worker), implement mock data, handle different scenarios, manage mock configurations. Consider testing and development workflow.
What are the best practices for API security?
Implement proper authentication/authorization, handle CORS, prevent XSS attacks, manage sensitive data. Consider security best practices and vulnerabilities.
How do you handle API versioning in React?
Manage API version in configurations, handle version-specific logic, implement proper abstractions. Consider backward compatibility and maintenance.
What are the patterns for handling API response transformation?
Implement data normalization, handle response mapping, manage data transformation logic. Consider consistency and maintainability.
How do you implement API request queuing?
Handle sequential requests, manage request priority, implement queue processing logic. Consider error handling and queue management.
What are the best practices for API performance monitoring?
Track request times, monitor error rates, implement performance metrics, analyze bottlenecks. Consider monitoring tools and optimization strategies.
How do you handle API request retries?
Implement exponential backoff, handle retry limits, manage retry states, provide feedback. Consider error types and retry strategies.
What are the patterns for handling GraphQL in React?
Use Apollo Client or other GraphQL clients, manage queries and mutations, handle caching, implement proper error handling. Consider GraphQL-specific optimizations.
How do you implement API request headers management?
Handle authentication headers, manage custom headers, implement interceptors, handle dynamic headers. Consider security and configuration management.
What are the best practices for API testing?
Implement unit tests for API integration, mock API responses, test error scenarios, verify data handling. Consider test coverage and maintenance.
How do you handle API request batching?
Implement request combining, manage batch processing, handle response correlation, optimize network usage. Consider performance and complexity trade-offs.
What are the patterns for handling API state persistence?
Implement local storage caching, handle state rehydration, manage persistence lifecycle. Consider storage strategies and state management.
How do you implement API request logging?
Handle request/response logging, implement debugging tools, manage log levels, track API usage. Consider privacy and performance implications.
Stark.ai
Instant Interviews
