Why would you choose React over Vue or Angular for a frontend project?

React is preferable when flexibility to choose stack tools is prioritized, the team already has experience with modern JavaScript, or the project needs to integrate with a broad ecosystem of libraries. Also when there is the possibility of scaling toward Next.js for SSR.

What advantage does React's component model offer for large applications?

It allows decomposing the UI into small, independent, and reusable pieces. Each component manages its own state and logic, facilitating parallel development by different teams and isolated testing of each piece.

When would you use React with Next.js instead of pure React as a SPA?

When the project requires SEO, good initial load performance, static page generation, or server-side rendering. Pure React as a SPA is suitable for internal applications or dashboards where SEO is not a priority.

What problem does React's Virtual DOM solve?

It minimizes direct operations on the real DOM, which are costly in performance. React calculates in memory the minimum set of necessary changes and applies them to the real DOM efficiently, improving performance in interfaces with frequent updates.

When would you extract logic from a component into a custom hook?

When stateful logic needs to be reused across multiple components, when a component becomes too complex mixing logic and presentation, or when you want to test the logic independently from the UI.

What is the difference between a component's local state and global state in React?

Local state with useState lives within the component and is only accessible by it and its children through props. Global state is shared between multiple components not hierarchically related and is managed with Context API, Redux, Zustand, or other solutions.

How do you decide what data to store in React state and what to derive?

Only data that cannot be calculated from other data is stored in state. Derived values are calculated directly in the render or with useMemo if the calculation is expensive. Minimizing state reduces complexity and synchronization bugs.

For what type of projects does React have a clear advantage over using HTML and vanilla JavaScript?

In applications with complex interfaces that change frequently, multiple views with navigation, shared state between components, or UI logic that is reused across different parts. For static pages or with little interactivity, React can be excessive.

What is the difference between useEffect with different dependency array configurations?

Without a dependency array, the effect runs after every render. With an empty array, it runs only when the component mounts. With dependencies, it runs when any of them changes. The returned cleanup function runs before the next effect or when unmounting.

When would you use useCallback and useMemo and when would you avoid using them?

useCallback memoizes functions to prevent child components with React.memo from rerending unnecessarily. useMemo memoizes expensive calculations. Both add complexity and have their own cost, so they are only justified when there is a measurable performance problem, not preventively.

How would you avoid unnecessary rerenders in a React component tree?

Using React.memo for components that receive the same props, useCallback for functions passed as props, useMemo for expensive calculated values, and splitting state so that changes only affect the components that actually need it.

When would you use Context API and when would you opt for a global state library like Zustand or Redux?

Context API is suitable for state that changes infrequently like theme, language, or authenticated user. For state that changes frequently or complex update logic, Redux Toolkit or Zustand are more efficient by avoiding massive rerenders from context changes.

How would you handle data fetching in a modern React application?

With libraries like React Query or SWR that automatically manage cache, loading and error states, revalidation, and synchronization. They avoid reinventing this logic with useEffect and useState, which generates code prone to bugs like race conditions and updates on unmounted components.

What is the difference between controlled and uncontrolled components in React?

In controlled components, the input state lives in React and is synchronized with value and onChange. In uncontrolled components, the DOM manages the value and it is accessed with refs. Controlled components are more predictable and testable; uncontrolled ones are useful for integrations with external libraries or simple forms.

How would you implement code splitting in a large React application?

Using React.lazy with Suspense to load components lazily when navigating to a route. Combined with React Router, the bundle is split by route, reducing initial load time by loading only the code needed for the current view.

How would you manage complex side effects with multiple dependencies in React?

By extracting logic into custom hooks to keep the component clean, using useReducer when state has multiple related sub-values, and evaluating if libraries like XState are needed for complex state machines with explicit transitions.

How would you structure a large React application to maintain code scalability?

By organizing code by domain or feature instead of by file type, with each feature containing its own components, hooks, services, and tests. Using a service layer for API communication, barrel exports for clean imports, and a clear state architecture from the start.

How would you design a reusable component system for an internal UI library?

By defining highly configurable primitive components with well-typed props in TypeScript, using composition instead of inheritance, documenting with Storybook, versioning with semver, and ensuring accessibility from the component design stage.

How would you optimize the performance of a React application with lists of thousands of elements?

Using virtualization with libraries like react-window or react-virtual to render only the visible elements on screen, pagination or infinite scroll to limit loaded data, and memoization of individual items with React.memo to avoid rerenders when updating other elements.

How would you approach testing React components with complex logic?

With React Testing Library for tests focused on user behavior rather than implementation details, Jest for custom hook logic with renderHook, and external service mocks with MSW to simulate API responses in integration tests.

When would you consider migrating from pure React to Next.js in an existing project?

When SEO becomes a priority, when initial load times impact user retention, when static page generation for content pages is needed, or when the team wants a more opinionated project structure with integrated routing and API routes.

How would you manage the state of complex forms with dynamic validations in React?

With React Hook Form for its performance by avoiding rerenders on each keystroke, integrated with Zod or Yup for typed and reusable validations. For forms with very dynamic logic like fields that depend on others, React Hook Form's watch allows reacting to specific changes.

Not understanding when and why a component rerenders

Not knowing that a component rerenders when its state, props, or the context it depends on changes leads to performance bugs and unexpected behaviors. It is a frequent question in mid-level React interviews.

Using useEffect for logic that does not require synchronization with the outside

Calculating derived values or transforming data inside useEffect when they could be calculated directly in the render or with useMemo reflects not understanding the purpose of this hook and generates more complex and bug-prone code.

Not knowing modern alternatives for data fetching

Implementing fetching with useEffect and useState manually without knowing React Query or SWR generates repetitive code with race conditions and incorrect cache handling. Not knowing these tools reflects being out of date with the React ecosystem.

Overusing Context API for frequently changing state

Using Context for global state that updates frequently generates massive rerenders in all subscribed components. Not knowing when Context is insufficient and when to use Zustand or Redux reflects a lack of experience with large React applications.

Not justifying the choice between pure React and Next.js

Choosing pure React without evaluating whether the project needs SSR or SSG, or using Next.js for an internal app without SEO requirements, reflects a lack of judgment about React ecosystem tools.

Applying memoization preventively without measuring the problem

Adding React.memo, useCallback, and useMemo to all components without a measurable performance problem adds unnecessary complexity. In interviews, knowing when to apply optimizations is expected, not applying them by default.

React

The JavaScript library for modern user interfaces

React is a JavaScript library developed by Meta for building user interfaces based on reusable components. Its declarative programming model, the Virtual DOM, and its flexible ecosystem make it the most widely adopted choice for building modern web applications, from SPAs to high-performance applications with server-side rendering.

JavaScriptTypeScriptJSXComponents

Market demand

React is the most in-demand frontend library in the market worldwide. It has a dominant presence in startups, product companies, and large corporations. It is the most frequent frontend requirement in job listings for frontend and full-stack positions.

Most in-demand frontend libraryPresent in startups and large companiesLargest frontend ecosystem

Technical requirements

Intermediate

Requires solid mastery of modern JavaScript with ES6+, understanding of the component model and lifecycle, and familiarity with hooks, state management, and API communication. TypeScript is increasingly expected in mid and senior positions.

Use cases

Real Projects

React is used to develop:

Single Page Applications with complex navigation
Dashboards and admin panels
SaaS platforms with rich interfaces
Applications with server-side rendering using Next.js

Types of Company

React is adopted by:

Tech startups with digital products
Product companies with complex frontends
Digital agencies with modern web projects
Large corporations with internal platforms

Production Scenarios

React is widely used in production environments such as:

SPAs with client-side routing
Applications with complex global state
Interfaces with frequent real-time updates
Frontends consuming REST or GraphQL APIs

Scalability

React offers multiple mechanisms to scale applications:

Code splitting and lazy loading to optimize the bundle
Memoization with useMemo and useCallback to avoid unnecessary renders
Scalable state management with Redux Toolkit or Zustand
Server-side rendering with Next.js for performance and SEO

Advantages and Disadvantages

Advantages

Reusable component model that scales well in large applications.

Huge ecosystem with solutions for routing, state, testing, and more.

Virtual DOM that optimizes real DOM updates efficiently.

Disadvantages

It is only a UI library, requiring decisions about the rest of the stack.

The proliferation of patterns and libraries can generate decision fatigue.

Without architectural discipline, large applications can become hard to maintain.

Comparison

Advantages of Vue.js

Smoother learning curve
Less decision fatigue with integrated official solutions
Template syntax closer to traditional HTML

Considerations

Vue offers more opinions by default and is more accessible to developers without experience in modern frameworks. React has greater market adoption and a larger ecosystem.