Back to Subject

Unit 6: Global State, Debugging, and Deployment - Practice Quiz

INT252 — Web App Development With Reactjs 60 Questions
0 Correct 0 Wrong 60 Left
0/60

1 What is a common challenge when sharing state between distant React components?

State sharing challenges in React applications Easy
A. Removing all component props
B. Prop drilling through many components
C. Writing HTML without elements
D. Using CSS classes for state

2 What is the main purpose of React's Context API?

Context API for global state management Easy
A. To share values across components
B. To define database tables
C. To create CSS animations
D. To compile JavaScript files

3 What is Redux Toolkit primarily used for?

Redux Toolkit fundamentals Easy
A. Simplifying Redux development
B. Styling web page layouts
C. Managing browser bookmarks
D. Replacing React components

4 What does a Redux slice usually contain?

Redux data flow and slice architecture Easy
A. Only HTML templates
B. State and related reducers
C. Browser history entries
D. Only CSS variables

5 What is the usual direction of data flow in Redux?

Redux data flow and slice architecture Easy
A. Reducer, component, database
B. Store, CSS, action, reducer
C. Component, HTML, stylesheet, store
D. Action, reducer, updated store

6 Which Redux function is used to send an action to the store?

Dispatching actions and using selectors Easy
A. subscribe
B. dispatch
C. select
D. render

7 What is the purpose of a selector in Redux?

Dispatching actions and using selectors Easy
A. To send data to a server
B. To read data from the store
C. To replace a reducer function
D. To create a React route

8 Why is asynchronous logic often used in React applications?

Overview of async logic handling Easy
A. To define a component name
B. To fetch data from an API
C. To apply a font family
D. To create a static heading

9 What does Zustand provide for React applications?

Lightweight global state management using Zustand Easy
A. A built-in SQL database
B. A browser testing engine
C. A lightweight state store
D. A CSS preprocessing language

10 Which type of state is usually appropriate for a form input used by one component?

Comparison of local state, global state, and server state Easy
A. Local state
B. Build state
C. Server state
D. Global state

11 What is server state?

Comparison of local state, global state, and server state Easy
A. Data used only during bundling
B. Data created by a button style
C. Data fetched from a backend
D. Data stored in a CSS file

12 Which factor should guide the choice of a state management solution?

Guidelines for selecting appropriate state management solutions Easy
A. The file extension of images
B. The number of HTML tags only
C. Application size and complexity
D. The monitor brand used by developers

13 What is the main goal of debugging a React application?

Debugging React applications Easy
A. Finding and fixing errors
B. Removing all application state
C. Changing every color in the interface
D. Increasing the number of components

14 What can React Developer Tools help developers inspect?

React Developer Tools and Profiler usage Easy
A. The computer's battery level
B. Components and their props
C. Physical network cables
D. Only the operating system

15 What does the React Profiler help measure?

React Developer Tools and Profiler usage Easy
A. Image file ownership
B. Component rendering performance
C. Keyboard hardware speed
D. Database table size

16 What can cause a React component to re-render?

Identifying rendering and performance issues Easy
A. A file being renamed outside the app
B. A change in its state
C. A change in the browser language only
D. A comment added to a stylesheet

17 Why are production builds usually optimized?

Build optimization and production readiness techniques Easy
A. To add unnecessary development warnings
B. To prevent browsers from loading JavaScript
C. To remove all application functionality
D. To reduce size and improve speed

18 What is a common use for environment variables in a React application?

Environment configuration using environment variables Easy
A. Creating database records automatically
B. Defining button hover colors only
C. Replacing all React components
D. Storing environment-specific settings

19 What is a typical first step before deploying a React application?

Deployment workflow overview Easy
A. Create a production build
B. Disable the application entry point
C. Delete the source code
D. Remove all package dependencies

20 What do modern deployment platforms commonly provide?

Introduction to modern deployment platforms Easy
A. Physical laptops for every user
B. Replacement React syntax
C. Permanent access to private keys
D. Hosting and automated builds

21 A shopping cart count is needed by the header, product list, and checkout components. Passing the count through several unrelated parent components has made the code difficult to maintain. What problem does this situation mainly demonstrate?

State sharing challenges in React applications Medium
A. Uncontrolled form state in the checkout
B. Prop drilling across multiple component levels
C. Code splitting between product modules
D. Server-side rendering of cart components

22 An application stores the current theme in React Context. Which implementation best allows deeply nested components to access the theme without receiving it through props?

Context API for global state management Medium
A. Pass the theme through each intermediate component
B. Wrap the component tree with a matching Context Provider
C. Store the theme in the browser history object
D. Create a separate state variable in every child

23 A Context Provider stores both a frequently changing text input and a rarely changing configuration object. Every input change causes many unrelated consumers to re-render. Which change is most appropriate?

Context API for global state management Medium
A. Replace every consumer with a local prop chain
B. Split frequently changing values into a separate context
C. Disable updates by mutating the context value directly
D. Move all values into one larger context object

24 Which Redux Toolkit feature is primarily used to define a state section, its reducers, and automatically generated action creators together?

Redux Toolkit fundamentals Medium
A. createSlice
B. configureStore
C. combineReducers
D. createAsyncThunk

25 A Redux Toolkit reducer appears to mutate an object directly, yet the state updates correctly. Why is this behavior supported?

Redux Toolkit fundamentals Medium
A. JavaScript objects are immutable inside reducers
B. React batches all reducer mutations into one update
C. Redux automatically clones every component prop
D. Immer produces immutable updates from draft mutations

26 A product review form should update only the review-related portion of a Redux store. Which slice design best follows Redux architecture?

Redux data flow and slice architecture Medium
A. Create a reviews slice with focused reducers and initial state
B. Place review logic inside the root component state
C. Create one reducer for every individual form input
D. Add review fields directly to every product object

27 In the standard Redux data flow, what normally happens after a user clicks a button that changes application state?

Redux data flow and slice architecture Medium
A. The selector sends the update to the reducer
B. The reducer directly calls the component event handler
C. The store modifies state without receiving an action
D. The component dispatches an action to the store

28 A component needs the total number of completed tasks from a Redux store. Which approach is most appropriate?

Dispatching actions and using selectors Medium
A. Dispatch a read action whenever the component renders
B. Use useSelector to read the derived completed-task value
C. Call the reducer directly from the component
D. Read the store object from a global window variable

29 A component must add a new item to a Redux list after a form submission. Which sequence is correct?

Dispatching actions and using selectors Medium
A. Update the component state and ignore the Redux store
B. Create an action and dispatch it with the item data
C. Call the slice reducer and replace the store manually
D. Use a selector to modify the list in place

30 A Redux application must fetch user details and represent loading, success, and failure states. Which approach is most suitable for standard Redux Toolkit usage?

Overview of async logic handling Medium
A. Perform the request inside a selector during rendering
B. Use createAsyncThunk with pending, fulfilled, and rejected handling
C. Call the API from a reducer before returning state
D. Store the Promise directly as the user object

31 A small React application needs shared notification settings without reducers, action types, or a Provider component. Which option best matches Zustand?

Lightweight global state management using Zustand Medium
A. Create a Zustand store with state and update functions
B. Pass notification settings through all component levels
C. Use browser cookies as the primary reactive store
D. Create a separate Context Provider for every setting

32 Which type of state is most appropriate for tracking whether a single modal is open?

Comparison of local state, global state, and server state Medium
A. Global application state
B. Local UI state
C. Server cache state
D. Persistent database state

33 A list of products comes from an API and should support caching, refetching, and stale-data handling. Which state category best describes it?

Comparison of local state, global state, and server state Medium
A. Component-local state
B. Temporary event state
C. Server state
D. Static build-time state

34 A value is used by two nearby components, changes frequently, and has no need to be accessed elsewhere. Which solution is usually the simplest?

Guidelines for selecting appropriate state management solutions Medium
A. Create a separate server endpoint for the value
B. Add the value to a large global Redux store
C. Persist the value in local storage immediately
D. Lift the state to their nearest common parent

35 A component displays stale data after an API response arrives. Which debugging step is most useful first?

Debugging React applications Medium
A. Disable React Strict Mode permanently
B. Remove all dependencies from every effect
C. Inspect the response and trace the state update path
D. Replace the component with a static HTML element

36 React Developer Tools shows that a child component re-renders whenever its parent updates, even though the child's visible data is unchanged. Which Profiler feature helps investigate this behavior?

React Developer Tools and Profiler usage Medium
A. The package manager dependency tree
B. The production server environment variables
C. The browser network request history
D. The component render timings and commit details

37 A parent component creates a new object prop on every render, causing a memoized child to re-render unnecessarily. Which change can help when the object values are unchanged?

Identifying rendering and performance issues Medium
A. Force the child to update with a changing key
B. Move the object into the child render method
C. Convert the object into a random string
D. Memoize the object with useMemo

38 A production React bundle contains a large charting library used on only one route. Which optimization is most appropriate?

Build optimization and production readiness techniques Medium
A. Disable minification for easier browser loading
B. Import the charting library from every component
C. Copy the library source into the main application file
D. Load the charting code with route-level dynamic import

39 A React application needs different API base URLs for development and production. Which practice is most appropriate?

Environment configuration using environment variables Medium
A. Store the production URL in component state
B. Hard-code both URLs inside every API request
C. Read environment-specific variables through the build configuration
D. Ask users to edit the compiled JavaScript manually

40 Which sequence best represents a typical React deployment workflow?

Deployment workflow overview Medium
A. Install dependencies, run tests, build, and publish artifacts
B. Run the production build, edit files, and skip verification
C. Publish source files, then install dependencies on user browsers
D. Upload only the source map files to the hosting platform

41 A checkout flow has CartIcon, CartDrawer, and OrderSummary in different branches of the component tree. Cart updates must be visible immediately everywhere, while unrelated page sections should not re-render. Which design best addresses this requirement?

State sharing challenges in React applications Hard
A. Use a separate useState hook in each cart-related component and synchronize with effects
B. Use a selective global store subscription so each component reads only the cart fields it needs
C. Store cart data in component-local state within CartDrawer and expose callbacks upward
D. Keep cart data in the nearest shared ancestor and pass it through props to every descendant

42 A ThemeContext provider exposes { theme, setTheme }. Toggling the theme causes every consumer to re-render, including consumers that only need setTheme. Which change most directly reduces unnecessary consumer renders?

Context API for global state management Hard
A. Replace useContext calls with useEffect calls that read the context once
B. Store theme in a module-level variable outside React state
C. Move setTheme into a second context whose provider value is stable
D. Wrap every context consumer in React.memo without changing provider values

43 In a Redux Toolkit slice reducer, why is the following code valid despite appearing to mutate state?

JS
increment(state) {
  state.value += 1;
}

Redux Toolkit fundamentals Hard
A. React batches reducer mutations before Redux exposes the updated store
B. Immer records mutations against a draft and produces an immutable next state
C. Redux Toolkit disables Redux state immutability checks in production
D. JavaScript automatically clones objects passed into reducer functions

44 A feature needs to react when a user logs out by clearing its cached client-side selections. Which slice design best preserves Redux architecture?

Redux data flow and slice architecture Hard
A. Have the feature component directly overwrite the Redux store during logout
B. Dispatch a special reset action from each component that reads the selection
C. Use extraReducers in dependent slices to handle the shared logout action
D. Define the logout reducer inside every dependent slice with the same action type

45 A component selects an array of filtered products using useSelector. The selector calls products.filter(...) on every store update, causing re-renders even when relevant product data has not changed. What is the strongest fix?

Dispatching actions and using selectors Hard
A. Dispatch the filtered array into Redux after every product update
B. Move the filter call into the component body after calling useSelector
C. Memoize the derived selector with createSelector using relevant state inputs
D. Use useEffect to copy the filtered array into component-local state

46 A search page dispatches an async request for each query. A slower response for "rea" arrives after a faster response for "react" and overwrites the newer results. Which approach best handles this race condition?

Overview of async logic handling Hard
A. Store every response in local component state and merge all result arrays
B. Track a request ID or use cancellation, then ignore responses that are no longer current
C. Increase the debounce delay until older requests are unlikely to finish later
D. Dispatch loading actions only after each request resolves successfully

47 A Zustand store holds user, notifications, and setUser. A component only renders the current user's name. Which subscription minimizes re-renders caused by notification updates?

Lightweight global state management using Zustand Hard
A. Use useStore((state) => state.user.name) to select only the required primitive
B. Use useStore() and destructure user from the returned full store object
C. Use useStore((state) => ({ ...state })) to receive an immutable store snapshot
D. Use useStore((state) => [state.user, state.notifications]) for shared updates

48 A product catalog is fetched from an API, may be invalidated by another user, requires loading and error states, and should be cached across routes. What classification and management approach is most appropriate?

Comparison of local state, global state, and server state Hard
A. Local UI state managed with useState in the catalog page
B. Global client state managed in a context provider without refetch logic
C. Server state managed by a query/cache layer with invalidation support
D. Derived state stored in Redux as a permanent copy of every API response

49 A React application has a small authenticated user object needed across routes, while a complex collaborative document requires cached API synchronization and optimistic updates. Which state strategy is most appropriate?

Guidelines for selecting appropriate state management solutions Hard
A. Use Context for authentication and a server-state solution for the document
B. Use Context for both because all cross-route state should use one solution
C. Use Redux slices for authentication and browser storage for the document
D. Use local state for both because each route can fetch its own data

50 A component displays stale derived data after a prop changes. Its code uses useMemo(() => expensiveTransform(items, mode), [items]). What is the most likely defect?

Debugging React applications Hard
A. The transform must be executed in useEffect instead of during rendering
B. The dependency list omits mode, which is used by the memoized computation
C. The items prop must be copied into state before it can be transformed
D. The memoized value should be stored in a ref instead of recalculated

51 React Profiler shows a list component with a high render duration. The flamegraph indicates that the list re-renders because its parent rendered, but its props are unchanged. What should be investigated first?

React Developer Tools and Profiler usage Hard
A. Whether the Profiler should be removed because profiling adds render overhead
B. Whether the list can be memoized and whether parent props retain stable references
C. Whether each list item should be moved into a separate React root
D. Whether the list should call setState during render to skip reconciliation

52 A dashboard renders 5,000 rows, and typing into a search input feels slow even after memoizing individual row components. Which remaining issue is most likely?

Identifying rendering and performance issues Hard
A. The browser still reconciles and lays out thousands of visible row containers
B. React requires all lists above 1,000 items to be stored in Redux
C. Memoized rows prevent the search input from receiving keyboard events
D. The row keys should be regenerated on each filter operation

53 A production build includes a large charting library that is only needed on an analytics route. Which change best reduces the initial JavaScript payload?

Build optimization and production readiness techniques Hard
A. Load the analytics route and charting dependency with dynamic import and React.lazy
B. Move the charting dependency into a context provider at the application root
C. Add the charting dependency to the service worker precache manifest
D. Import the charting dependency from every route to improve module reuse

54 A frontend build uses VITE_API_URL to choose its API endpoint. A developer proposes placing a production database password in VITE_DB_PASSWORD. Why is this unsafe?

Environment configuration using environment variables Hard
A. Environment variables are encrypted only when their names start with VITE_
B. Client-exposed build variables can be included in the browser bundle
C. Vite variables are available only during local development
D. Database passwords cannot contain uppercase letters in deployment platforms

55 A single-page React application is deployed successfully, but refreshing /settings/profile returns a platform 404 while in-app navigation works. What deployment configuration is required?

Deployment workflow overview Hard
A. Configure a rewrite so unknown application routes serve index.html
B. Generate one static HTML file for every possible user profile route
C. Disable browser refreshes for all routes except the application root
D. Move the React router configuration into an environment variable

56 A team wants every pull request to receive an isolated URL that builds the current branch and can be reviewed before merging. Which modern deployment-platform capability directly supports this?

Introduction to modern deployment platforms Hard
A. Preview deployments triggered by pull-request or branch builds
B. A local development server exposed through a static IP address
C. A production CDN configured with a single immutable origin
D. A database migration that runs on every browser page load

57 Which release practice most effectively reduces the risk of silently deploying a broken React build to production?

Best practices for deploying production-ready React applications Hard
A. Reuse the development API endpoint so production configuration is unnecessary
B. Disable source maps so runtime errors cannot be reported by browsers
C. Run automated linting, tests, production builds, and deployment checks in CI
D. Deploy directly from a developer laptop after manually checking the page

58 A reducer must replace the entire state for a slice whose state is a primitive number. Which implementation is correct in Redux Toolkit?

Redux Toolkit fundamentals Hard
A. reset() { return 0; }
B. reset(state) { state = 0; }
C. reset(state) { delete state; }
D. reset(state) { state.value = 0; }

59 An async thunk loads account data. The user navigates away before it resolves, but the data should remain cached for later use. What is the best reason not to place the fetch solely inside the page component's useEffect with local state?

Overview of async logic handling Hard
A. React effects are prohibited from calling asynchronous functions in production builds
B. A centralized async state layer can retain request status and cached data independently of the page
C. Local state cannot store asynchronous results after a component unmounts
D. Page components are unable to dispatch actions after mounting

60 A development-only bug appears because an effect opens a WebSocket twice under StrictMode. The effect currently returns no cleanup function. What is the correct fix?

Debugging React applications Hard
A. Add cleanup that closes the WebSocket and make setup safe for repeated execution
B. Remove StrictMode so effects execute only once during development
C. Replace useEffect with useMemo so the WebSocket is created during rendering
D. Use a global boolean that permanently prevents all later WebSocket connections
Previous MCQ
Unit 5