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. Prop drilling through many components
B. Writing HTML without elements
C. Removing all component props
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 create CSS animations
C. To define database tables
D. To compile JavaScript files

3 What is Redux Toolkit primarily used for?

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

4 What does a Redux slice usually contain?

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

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

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

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

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

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

8 Why is asynchronous logic often used in React applications?

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

9 What does Zustand provide for React applications?

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

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

11 What is server state?

Comparison of local state, global state, and server state Easy
A. Data fetched from a backend
B. Data used only during bundling
C. Data created by a button style
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 number of HTML tags only
B. Application size and complexity
C. The file extension of images
D. The monitor brand used by developers

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

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

14 What can React Developer Tools help developers inspect?

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

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 change in the browser language only
B. A file being renamed outside the app
C. A change in its state
D. A comment added to a stylesheet

17 Why are production builds usually optimized?

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

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

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

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

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

20 What do modern deployment platforms commonly provide?

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

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. Code splitting between product modules
B. Server-side rendering of cart components
C. Uncontrolled form state in the checkout
D. Prop drilling across multiple component levels

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. Wrap the component tree with a matching Context Provider
B. Pass the theme through each intermediate component
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. Split frequently changing values into a separate context
B. Replace every consumer with a local prop chain
C. Move all values into one larger context object
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. combineReducers
B. configureStore
C. createAsyncThunk
D. createSlice

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. Immer produces immutable updates from draft mutations
B. Redux automatically clones every component prop
C. React batches all reducer mutations into one update
D. JavaScript objects are immutable inside reducers

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. Add review fields directly to every product object
B. Create one reducer for every individual form input
C. Create a reviews slice with focused reducers and initial state
D. Place review logic inside the root component state

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 component dispatches an action to the store
C. The reducer directly calls the component event handler
D. The store modifies state without receiving an action

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. Call the reducer directly from the component
B. Dispatch a read action whenever the component renders
C. Read the store object from a global window variable
D. Use useSelector to read the derived completed-task value

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. Create an action and dispatch it with the item data
B. Call the slice reducer and replace the store manually
C. Use a selector to modify the list in place
D. Update the component state and ignore the Redux store

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. Use createAsyncThunk with pending, fulfilled, and rejected handling
B. Perform the request inside a selector during rendering
C. Store the Promise directly as the user object
D. Call the API from a reducer before returning state

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 separate Context Provider for every setting
B. Pass notification settings through all component levels
C. Create a Zustand store with state and update functions
D. Use browser cookies as the primary reactive store

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. Persistent database state
B. Local UI state
C. Server cache 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. Persist the value in local storage immediately
C. Create a separate server endpoint for the value
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. Disable React Strict Mode permanently
B. Remove all dependencies from every effect
C. Replace the component with a static HTML element
D. Inspect the response and trace the state update path

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 browser network request history
B. The production server environment variables
C. The package manager dependency tree
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. Convert the object into a random string
C. Move the object into the child render method
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. Load the charting code with route-level dynamic import
B. Import the charting library from every component
C. Disable minification for easier browser loading
D. Copy the library source into the main application file

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. Ask users to edit the compiled JavaScript manually
B. Hard-code both URLs inside every API request
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. Publish source files, then install dependencies on user browsers
D. Install dependencies, run tests, build, and publish artifacts

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. Move setTheme into a second context whose provider value is stable
B. Store theme in a module-level variable outside React state
C. Replace useContext calls with useEffect calls that read the context once
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. JavaScript automatically clones objects passed into reducer functions
B. React batches reducer mutations before Redux exposes the updated store
C. Immer records mutations against a draft and produces an immutable next state
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. Have the feature component directly overwrite the Redux store during logout
B. Define the logout reducer inside every dependent slice with the same action type
C. Dispatch a special reset action from each component that reads the selection
D. Use extraReducers in dependent slices to handle the shared logout action

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. Dispatch the filtered array into Redux after every product update
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. Increase the debounce delay until older requests are unlikely to finish later
B. Track a request ID or use cancellation, then ignore responses that are no longer current
C. Dispatch loading actions only after each request resolves successfully
D. Store every response in local component state and merge all result arrays

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 })) to receive an immutable store snapshot
B. Use useStore((state) => [state.user, state.notifications]) for shared updates
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. Local UI state managed with useState in the catalog page
C. Derived state stored in Redux as a permanent copy of every API response
D. Global client state managed in a context provider without refetch logic

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 Context for authentication and a server-state solution for the document
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 dependency list omits mode, which is used by the memoized computation
B. The items prop must be copied into state before it can be transformed
C. The transform must be executed in useEffect instead of during rendering
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 each list item should be moved into a separate React root
B. Whether the Profiler should be removed because profiling adds render overhead
C. Whether the list can be memoized and whether parent props retain stable references
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. Memoized rows prevent the search input from receiving keyboard events
C. React requires all lists above 1,000 items to be stored in Redux
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. Import the charting dependency from every route to improve module reuse
B. Add the charting dependency to the service worker precache manifest
C. Load the analytics route and charting dependency with dynamic import and React.lazy
D. Move the charting dependency into a context provider at the application root

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. Vite variables are available only during local development
C. Client-exposed build variables can be included in the browser bundle
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 production CDN configured with a single immutable origin
C. A local development server exposed through a static IP address
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. Run automated linting, tests, production builds, and deployment checks in CI
B. Deploy directly from a developer laptop after manually checking the page
C. Disable source maps so runtime errors cannot be reported by browsers
D. Reuse the development API endpoint so production configuration is unnecessary

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

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. Remove StrictMode so effects execute only once during development
B. Replace useEffect with useMemo so the WebSocket is created during rendering
C. Add cleanup that closes the WebSocket and make setup safe for repeated execution
D. Use a global boolean that permanently prevents all later WebSocket connections
Previous MCQ
Unit 5