🚀 React Interview Experience (July 2025): Coditas Technologiew

Overview

This document details a React developer interview experience at Coditas Technologie. The interview focused on assessing the candidate's proficiency in various aspects of React development, including custom hooks, state management, performance optimization, and error handling. The candidate demonstrated a strong understanding of React concepts and practical problem-solving skills.

Interview Rounds

The interview covered a range of technical questions, including:

• Custom Hooks: The candidate was questioned on their experience with custom hooks, their purpose, and when to use them instead of state management tools like Redux or Context API. The candidate explained the use of custom hooks for encapsulating reusable logic, such as data fetching, form handling, and authentication.
• useFetch Hook: The interviewer inquired about the return values of a useFetch custom hook, expecting responses to include data, error, and loading states.
• API Failure Handling: The candidate described strategies for handling API failures, emphasizing decoupling API logic using custom hooks or tools like TanStack Query (React Query) and implementing retry mechanisms.
• Image Optimization: The interviewer explored image optimization techniques, including lazy loading, modern image formats (WebP, AVIF), responsive images, compression, CDNs, and blurred placeholders.
• State Management: The candidate was asked about when to use Redux or Context API, differentiating their use cases based on application complexity and state requirements. They also mentioned Zustand as an alternative.
• Performance Optimization: The interviewer inquired about performance optimization techniques, such as memoization (React.memo, useMemo, useCallback), virtualization (react-window, react-virtualized), lazy loading (React.lazy and Suspense), code splitting, debouncing/throttling, minimized re-renders, and preloading.
• React 19: The candidate discussed new features introduced in React 19, including Async React Actions, Form Actions in Server Components, useOptimistic, improved form submission handling, a new compiler infrastructure, simplified streaming SSR support, a new use hook, Document Metadata Handling and better support for RSC (React Server Components) and partial hydration.
• useEffect and Refs: The interviewer presented scenarios involving useEffect and refs, testing the candidate's understanding of timing and potential issues when accessing refs before the DOM is painted. The candidate suggested solutions like using ResizeObserver, null checks, requestAnimationFrame, or useLayoutEffect.
• useEffect Dependency Array: The candidate correctly identified that a useEffect hook without a dependency array will execute after every render.
• Redux Experience: The candidate elaborated on their experience with Redux, including Redux Toolkit (RTK), createSlice, createAsyncThunk, memoized selectors (with reselect), Redux DevTools, and various middleware (redux-thunk, redux-saga). They also mentioned integrating Redux with React Query and using persisted reducers via redux-persist.
• React.memo Syntax: The candidate provided the correct syntax for React.memo.
• Local and Session Storage: The candidate described their experience with localStorage and sessionStorage, including use cases and security considerations. They emphasized the importance of not storing sensitive data in local/session storage and preferring HttpOnly cookies for tokens.
• Conditional Rendering with React.memo: The interviewer presented a scenario where a component should only re-render when a specific prop (name) changes. The candidate proposed using React.memo with a custom comparison function or passing the name as a separate primitive prop.
• Refs and Mutable State: The candidate explained that modifying an object via its reference without calling setState will change the internal value but not trigger a re-render. This is suitable for storing mutable state that doesn't affect the UI.
• Refs and DOM Manipulation: The candidate acknowledged that directly updating DOM properties via refs works, but it's best used only when React doesn't need to track those changes.
• useCallback Purpose: The candidate clarified that useCallback memoizes the function reference, not the result, and is useful for optimizing rendering and avoiding breaking memoization in child components or dependency arrays.
• Handling Multiple API Failures: The candidate outlined a strategy for handling multiple API failures, including isolating API calls, partial rendering with fallback UI, selective retry logic, graceful degradation with Promise.allSettled(), error boundaries, and observability tools.

Key Takeaways

• A strong understanding of React fundamentals, including hooks, state management, and performance optimization, is crucial.
• Experience with custom hooks for encapsulating reusable logic is highly valued.
• The ability to handle API failures gracefully and implement retry mechanisms is essential for building robust applications.
• Knowledge of performance optimization techniques, such as memoization and virtualization, is important for creating efficient React components.
• Familiarity with state management libraries like Redux and Context API is expected, with an understanding of when to use each.
• Staying up-to-date with new React features and best practices is beneficial.
• Understanding the nuances of refs and when to use them for DOM manipulation is important.