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. Using CSS classes for state
C. Prop drilling through many components
D. Writing HTML without elements

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

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

3 What is Redux Toolkit primarily used for?

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

4 What does a Redux slice usually contain?

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

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

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

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

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

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 create a React route
C. To replace a reducer function
D. To read data from the store

8 Why is asynchronous logic often used in React applications?

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

9 What does Zustand provide for React applications?

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

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. Global state
B. Local state
C. Build state
D. Server state

11 What is server state?

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

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

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

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

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

14 What can React Developer Tools help developers inspect?

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

15 What does the React Profiler help measure?

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

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

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

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. Storing environment-specific settings
C. Defining button hover colors only
D. Replacing all React components

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

Deployment workflow overview Easy
A. Delete the source code
B. Create a production build
C. Disable the application entry point
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. Permanent access to private keys
C. Replacement React syntax
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. Server-side rendering of cart components
C. Prop drilling across multiple component levels
D. Code splitting between product modules

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. Create a separate state variable in every child
B. Pass the theme through each intermediate component
C. Wrap the component tree with a matching Context Provider
D. Store the theme in the browser history object

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. Move all values into one larger context object
B. Replace every consumer with a local prop chain
C. Split frequently changing values into a separate context
D. Disable updates by mutating the context value directly

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. configureStore
B. createSlice
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. React batches all reducer mutations into one update
B. JavaScript objects are immutable inside reducers
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. Add review fields directly to every product object
C. Place review logic inside the root component state
D. Create one reducer for every individual form input

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 store modifies state without receiving an action
B. The reducer directly calls the component event handler
C. The selector sends the update to the reducer
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. Call the reducer directly from the component
C. Use useSelector to read the derived completed-task value
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. Call the slice reducer and replace the store manually
B. Create an action and dispatch it with the item data
C. Update the component state and ignore the Redux store
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. Call the API from a reducer before returning state
B. Perform the request inside a selector during rendering
C. Use createAsyncThunk with pending, fulfilled, and rejected handling
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. Use browser cookies as the primary reactive store
B. Create a Zustand store with state and update functions
C. Pass notification settings through all component levels
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. Server cache state
B. Local UI state
C. Persistent database state
D. Global application 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. Static build-time state
B. Server state
C. Component-local state
D. Temporary event 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. Lift the state to their nearest common parent
B. Create a separate server endpoint for the value
C. Persist the value in local storage immediately
D. Add the value to a large global Redux store

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

Debugging React applications Medium
A. Inspect the response and trace the state update path
B. Remove all dependencies from every effect
C. Disable React Strict Mode permanently
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 component render timings and commit details
B. The browser network request history
C. The package manager dependency tree
D. The production server environment variables

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. Move the object into the child render method
B. Force the child to update with a changing key
C. Memoize the object with useMemo
D. Convert the object into a random string

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. Load the charting code with route-level dynamic import
B. Copy the library source into the main application file
C. Import the charting library from every component
D. Disable minification for easier browser loading

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. Hard-code both URLs inside every API request
B. Ask users to edit the compiled JavaScript manually
C. Store the production URL in component state
D. Read environment-specific variables through the build configuration

40 Which sequence best represents a typical React deployment workflow?

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

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. Keep cart data in the nearest shared ancestor and pass it through props to every descendant
B. Use a separate useState hook in each cart-related component and synchronize with effects
C. Store cart data in component-local state within CartDrawer and expose callbacks upward
D. Use a selective global store subscription so each component reads only the cart fields it needs

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. Wrap every context consumer in React.memo without changing provider values
B. Store theme in a module-level variable outside React state
C. Move setTheme into a second context whose provider value is stable
D. Replace useContext calls with useEffect calls that read the context once

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. JavaScript automatically clones objects passed into reducer functions
D. Redux Toolkit disables Redux state immutability checks in production

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. Use extraReducers in dependent slices to handle the shared logout action
B. Have the feature component directly overwrite the Redux store during logout
C. Dispatch a special reset action from each component that reads the selection
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. Move the filter call into the component body after calling useSelector
B. Memoize the derived selector with createSelector using relevant state inputs
C. Use useEffect to copy the filtered array into component-local state
D. Dispatch the filtered array into Redux after every product update

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. Dispatch loading actions only after each request resolves successfully
C. Track a request ID or use cancellation, then ignore responses that are no longer current
D. Increase the debounce delay until older requests are unlikely to finish later

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, state.notifications]) for shared updates
B. Use useStore((state) => ({ ...state })) to receive an immutable store snapshot
C. Use useStore((state) => state.user.name) to select only the required primitive
D. Use useStore() and destructure user from the returned full store object

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. Server state managed by a query/cache layer with invalidation support
B. Derived state stored in Redux as a permanent copy of every API response
C. Global client state managed in a context provider without refetch logic
D. Local UI state managed with useState in the catalog page

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 both because all cross-route state should use one solution
B. Use Redux slices for authentication and browser storage for the document
C. Use local state for both because each route can fetch its own data
D. Use Context for authentication and a server-state solution for the document

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 items prop must be copied into state before it can be transformed
B. The transform must be executed in useEffect instead of during rendering
C. The dependency list omits mode, which is used by the memoized computation
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 the list should call setState during render to skip reconciliation
D. Whether each list item should be moved into a separate React root

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. React requires all lists above 1,000 items to be stored in Redux
B. Memoized rows prevent the search input from receiving keyboard events
C. The row keys should be regenerated on each filter operation
D. The browser still reconciles and lays out thousands of visible row containers

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. Import the charting dependency from every route to improve module reuse
B. Load the analytics route and charting dependency with dynamic import and React.lazy
C. Move the charting dependency into a context provider at the application root
D. Add the charting dependency to the service worker precache manifest

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. Client-exposed build variables can be included in the browser bundle
B. Vite variables are available only during local development
C. Environment variables are encrypted only when their names start with VITE_
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. Move the React router configuration into an environment variable
B. Configure a rewrite so unknown application routes serve index.html
C. Disable browser refreshes for all routes except the application root
D. Generate one static HTML file for every possible user profile route

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. A local development server exposed through a static IP address
B. A production CDN configured with a single immutable origin
C. Preview deployments triggered by pull-request or branch builds
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. Deploy directly from a developer laptop after manually checking the page
B. Run automated linting, tests, production builds, and deployment checks in CI
C. Reuse the development API endpoint so production configuration is unnecessary
D. Disable source maps so runtime errors cannot be reported by browsers

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(state) { state = 0; }
B. reset() { return 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. Local state cannot store asynchronous results after a component unmounts
B. A centralized async state layer can retain request status and cached data independently of the page
C. Page components are unable to dispatch actions after mounting
D. React effects are prohibited from calling asynchronous functions in production builds

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. Replace useEffect with useMemo so the WebSocket is created during rendering
C. Remove StrictMode so effects execute only once during development
D. Use a global boolean that permanently prevents all later WebSocket connections
Previous MCQ
Unit 5