HomeSubjectsUniversityBlogAbout

Frontend Frameworks & Libraries

Topic in Web Development

210 total MCQsShowing 30 with explanations10 Easy10 Medium10 Hard

About This Topic

A frontend framework is a toolkit, such as React, Angular or Vue, for building browser interfaces from reusable components that update when data changes. React dominates the questions: JSX, props versus state, the virtual DOM and reconciliation, why lists need keys, and hooks such as useState, useEffect, useMemo and useContext. You should understand one-way data flow, lifting state up, prop drilling and when to adopt Redux or the Context API. Comparisons with Angular's two-way binding and Vue's reactivity are common. Rendering strategies (CSR, SSR, SSG) and hydration in meta-frameworks like Next.js round out the topic.

Below are 30 practice questions from a pool of 210 Frontend Frameworks & Libraries MCQs, one of 17 topics in Web Development. Each shows the correct answer with an explanation; when you are ready, take a timed quiz to test recall under exam conditions.

Practice Questions

Each question below shows the correct answer with a full explanation. Use these to build conceptual understanding before attempting a timed quiz.

Frontend Frameworks & LibrariesEasy

Q1. What is React?

  1. A.A CSS framework for responsive page design
  2. B.A relational database management system tool
  3. C.A server-side backend application framework
  4. D.A JavaScript library for building user interfaces✓ Correct

Explanation

React is a JavaScript library by Facebook for building reusable UI components.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q2. What is a component in React?

  1. A.A reusable piece of UI with its own logic✓ Correct
  2. B.A server route for handling requests
  3. C.A CSS class for styling HTML elements
  4. D.A database table for storing records

Explanation

A React component is a reusable, self-contained piece of UI.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q3. What is Vue.js?

  1. A.A video player for streaming content
  2. B.A testing tool for browser automation
  3. C.A CSS library for animation effects
  4. D.A progressive framework for building UIs✓ Correct

Explanation

Vue.js is a progressive framework for building UIs with reactive data binding.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q4. What is Angular?

  1. A.A distributed version control system tool
  2. B.A CSS grid system for page layout design
  3. C.A TypeScript-based web framework by Google✓ Correct
  4. D.A NoSQL document-oriented database system

Explanation

Angular is a comprehensive TypeScript-based framework by Google.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q5. What is JSX?

  1. A.A new standalone programming language
  2. B.A CSS preprocessor like Sass or Less
  3. C.A syntax extension for HTML-like code in JS✓ Correct
  4. D.A JSON alternative data exchange format

Explanation

JSX lets you write HTML-like syntax in JavaScript files.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q6. What are props in React?

  1. A.Database properties for configuring schemas
  2. B.Browser settings for rendering preferences
  3. C.Data passed from parent to child components✓ Correct
  4. D.CSS properties applied to styled elements

Explanation

Props are read-only data passed from parent to child components.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q7. What is state in React?

  1. A.A geographical US state name string value
  2. B.An object holding data that triggers re-renders✓ Correct
  3. C.A CSS state like hover or focus pseudo-class
  4. D.A server state for managing session data

Explanation

State stores component data; when state changes, the component re-renders.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q8. What is npm?

  1. A.A server-side programming language runtime
  2. B.Node Package Manager for managing dependencies✓ Correct
  3. C.A CSS framework for responsive web design
  4. D.A relational database management system

Explanation

npm is the default package manager for Node.js.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q9. What does npm install do?

  1. A.Installs CSS styles into browser cache
  2. B.Installs dependencies from package.json✓ Correct
  3. C.Installs a new browser on the system
  4. D.Installs a new operating system update

Explanation

npm install downloads all dependencies listed in package.json.

Report an error in this question

Frontend Frameworks & LibrariesEasy

Q10. What is a Single Page Application (SPA)?

  1. A.A mobile app built with native platform-specific tools
  2. B.A static HTML page with no interactive features at all
  3. C.A web app that loads once and dynamically updates content✓ Correct
  4. D.A website containing only a single paragraph of text

Explanation

An SPA loads a single HTML page and dynamically updates content via JavaScript.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q11. What is the Virtual DOM in React?

  1. A.A browser API for accessing device hardware and sensors
  2. B.A lightweight copy of the real DOM for efficient updates✓ Correct
  3. C.A virtual reality feature for immersive web experiences
  4. D.A hidden HTML element that is invisible to the end user

Explanation

The Virtual DOM is an in-memory representation used for efficient diffing and reconciliation.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q12. What is React's useState hook?

  1. A.A database hook for managing query results
  2. B.A function adding state to functional components✓ Correct
  3. C.A CSS hook for applying dynamic styles
  4. D.A routing hook for handling URL navigation

Explanation

useState lets functional components declare and manage state variables.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q13. What is the useEffect hook used for?

  1. A.Creating CSS effects through JavaScript manipulation
  2. B.Performing side effects like data fetching in components✓ Correct
  3. C.Managing component state with reactive data binding
  4. D.Adding visual effects like shadows and gradients

Explanation

useEffect runs side effects after render, replacing lifecycle methods.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q14. What is Vue's reactivity system based on?

  1. A.Manual DOM manipulation with vanilla JavaScript
  2. B.JavaScript Proxies that track and trigger updates✓ Correct
  3. C.Web Workers running in separate background threads
  4. D.CSS variables with automatic browser recalculation

Explanation

Vue 3 uses JavaScript Proxies to intercept property access and trigger re-renders.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q15. What is Angular's two-way data binding?

  1. A.CSS binding between stylesheets and HTML elements
  2. B.A database connection pool for managing active queries
  3. C.Changes in model automatically update the view and vice versa✓ Correct
  4. D.Server-client binding for real-time data synchronization

Explanation

Two-way data binding synchronizes the model and view automatically.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q16. What is React Router?

  1. A.A server framework for building backend APIs
  2. B.A library for handling navigation in React apps✓ Correct
  3. C.A CSS router for switching between stylesheets
  4. D.A physical network router for internet traffic

Explanation

React Router enables client-side navigation by mapping URL paths to components.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q17. What is a Higher-Order Component (HOC) in React?

  1. A.A component rendering at the top of a page
  2. B.A function that takes and returns an enhanced component✓ Correct
  3. C.A CSS wrapper element for styling child elements
  4. D.A parent component wrapping all child components

Explanation

A HOC takes a component and returns a new enhanced component.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q18. What is Vuex/Pinia used for in Vue?

  1. A.Managing CSS styles across Vue applications
  2. B.Centralized state management for Vue applications✓ Correct
  3. C.Managing database connections in Vue projects
  4. D.Server-side routing configuration for Vue apps

Explanation

Vuex and Pinia provide centralized state management for Vue.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q19. What is the purpose of Angular's NgModule?

  1. A.A CSS module for scoped component styling
  2. B.A testing module for automated browser tests
  3. C.A class organizing components, directives, and services✓ Correct
  4. D.A database module for connection management

Explanation

NgModule groups related Angular features and defines the compilation context.

Report an error in this question

Frontend Frameworks & LibrariesMedium

Q20. What is Next.js?

  1. A.A testing tool for automated end-to-end browser tests
  2. B.A NoSQL document-oriented database management tool
  3. C.A CSS framework for responsive web design layouts
  4. D.A React framework supporting SSR and static generation✓ Correct

Explanation

Next.js provides SSR, SSG, API routes, and other production-ready features for React.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q21. What is React's Concurrent Mode?

  1. A.Parallel CSS processing across multiple browser threads
  2. B.Multi-threaded JavaScript execution using Web Workers
  3. C.Running multiple separate React applications at once
  4. D.Features helping React stay responsive via background rendering✓ Correct

Explanation

Concurrent Mode allows React to work on multiple state updates simultaneously.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q22. What is the purpose of React.memo()?

  1. A.Creating in-app memo or notification features
  2. B.A HOC memoizing a component to prevent re-renders✓ Correct
  3. C.Saving developer notes within the application code
  4. D.Memory management and garbage collection control

Explanation

React.memo() skips re-rendering when props haven't changed.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q23. What is Angular's Change Detection strategy OnPush?

  1. A.A Git branching strategy for version control
  2. B.Detecting CSS property changes in stylesheets
  3. C.Push notifications sent to mobile device users
  4. D.A strategy checking only when input references change✓ Correct

Explanation

OnPush only runs change detection when input references change or events fire.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q24. What is the Composition API in Vue 3?

  1. A.A music composition tool for creating audio
  2. B.A CSS composition method for combining styles
  3. C.A database query API for composing SQL queries
  4. D.An API organizing component logic using setup()✓ Correct

Explanation

The Composition API allows organizing component logic by concern using setup().

Report an error in this question

Frontend Frameworks & LibrariesHard

Q25. What is code splitting in frontend frameworks?

  1. A.Splitting CSS files into smaller partial files
  2. B.Dividing server code into separate microservices
  3. C.Splitting HTML files across multiple server routes
  4. D.Breaking the bundle into smaller on-demand chunks✓ Correct

Explanation

Code splitting divides the application into smaller bundles loaded lazily.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q26. What is Server-Side Rendering (SSR) in React/Next.js?

  1. A.Rendering CSS on the server before page delivery
  2. B.Running JavaScript only on server, never on client
  3. C.Generating HTML on the server for each client request✓ Correct
  4. D.A database rendering technique for cached query results

Explanation

SSR renders React components to HTML on the server for faster initial loads and better SEO.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q27. What is React's useCallback hook?

  1. A.A callback URL handler for authentication flows
  2. B.An event listener for handling DOM user events
  3. C.A hook returning a memoized callback function✓ Correct
  4. D.A state management hook for complex data flows

Explanation

useCallback memoizes a function reference so it does not get recreated on every render.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q28. What is the purpose of useMemo in React?

  1. A.Memoizing expensive computations until deps change✓ Correct
  2. B.Creating memoized components that never re-render
  3. C.Memory allocation and management control utilities
  4. D.Managing in-app memo and notification features

Explanation

useMemo caches the result of an expensive calculation and only recomputes when dependencies change.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q29. What is Angular's Dependency Injection?

  1. A.A testing technique for isolating component behavior
  2. B.Importing npm packages into project configuration
  3. C.A class receiving dependencies from external sources✓ Correct
  4. D.Injecting CSS dependencies into component styles

Explanation

Angular's DI system creates and provides dependencies to classes automatically.

Report an error in this question

Frontend Frameworks & LibrariesHard

Q30. What is Incremental Static Regeneration (ISR) in Next.js?

  1. A.Updating static pages after deploy without full rebuild✓ Correct
  2. B.Regenerating CSS incrementally during development
  3. C.Incremental database updates during data migration
  4. D.A version control strategy for incremental releases

Explanation

ISR regenerates individual static pages in the background after a specified revalidation period.

Report an error in this question

Ready to test yourself on Frontend Frameworks & Libraries?

Take a timed quiz drawn from 210+ questions on this topic. No signup required — your progress saves in your browser.

Start Frontend Frameworks & Libraries Quiz