React Intermediate Assessment ANS
React Intermediate Assessment ANS
//Code logic
}, [data]);
10) In React, when is the cleanup function returned by the useEffect hook
executed? 1M
A) When the component is mounted.
B) When the component's state changes.
C) When the component is unmounted.
D) When the component is re-rendered.
11) What is a common side-effect scenario in React when using the useEffect
hook? 0M
A) Memory leaks
B) Infinite loop
C) Unnecessary re-renders
D) State mutations
12) How can you pass parameters to a route in React Router Dom? 1M
A) By using the params prop of the Route component.
B) By embedding parameters directly in the URL path.
C) By using the query prop of the Link component.
D) By passing parameters as props to the component rendered by the
Route.
13) In React Router Dom, what is the purpose of the Route component? 1M
A) It defines the structure and layout of a specific route in the application.
B) It handles HTTP requests and responses for server-side routing.
C) It renders a specific component when the current URL matches the path
specified in the Route component.
D) It provides navigation links for the user to switch between different pages
in the application.
16) How does React Router Dom handle navigation between pages in a Single
Page Application (SPA)? 1M
A) By reloading the entire page for each navigation.
B) By intercepting URL changes and rendering the appropriate components
without reloading the page.
C) By using AJAX requests to fetch new page content from the server.
D) By preloading all pages and assets on initial load.
17) What is the primary advantage of using React Router Dom in a React
application? 1M
A) It reduces the number of HTTP requests required to navigate between
pages.
B) It simplifies the implementation of Single Page Applications (SPAs) by
handling routing logic.
C) It improves the performance of the application by preloading assets for
faster navigation.
D) It enables server-side rendering for better SEO optimization.
18) What is the purpose of the Switch component in React Router? 1M
A) It is used to create nested routes.
B) It ensures that only the first matching route is rendered.
C) It is used to group multiple routes.
D) It is used to define a default route.
24) What is the benefit of using controlled input fields in React when managing
multiple input fields? 1M
A) Controlled input fields require less code compared to uncontrolled input
fields.
B) Controlled input fields provide better performance in large-scale
applications.
C) Controlled input fields make it easier to synchronize input field values
with React state.
D) Controlled input fields allow for more flexibility in input field validation.
25) How can you handle changes to multiple input fields in React? 0M
A) By directly modifying the input field values in the component's render
method.
B) By using the onBlur event to detect changes to input field values.
C) By defining separate onChange event handlers for each input field.
D) By defining a single onChange event handler for all input fields.
26) How can you manage multiple input fields in a React component? 0M
A) By creating separate state variables for each input field.
B) By using a single state variable to manage an array of input field values.
C) By directly modifying the input field values using JavaScript.
D) By using the defaultValue attribute to initialize the input field values.
27) How can you manage multiple input fields in a React component? 0M
A) By creating separate state variables for each input field.
B) By using a single state variable to manage an array of input field values.
C) By directly modifying the input field values using JavaScript.
D) By using the defaultValue attribute to initialize the input field values.
28) In the GitHub Card List App implemented in React, what is the purpose of the
Card component? 1M
A) To display a list of GitHub users along with their avatar, name, and bio.
B) To handle form submissions and retrieve user data from the GitHub API.
C) To manage the state of the GitHub users fetched from the API.
D) To provide navigation links for users to view individual GitHub profiles.
29) In the GitHub Card List App implemented in React, what role does the Form
component play? 1M
A) It renders a form for users to input GitHub usernames and add them to
the card list.
B) It manages the state of the input field for adding new GitHub usernames.
C) It displays detailed information about a specific GitHub user when
clicked.
D) It fetches user data from the GitHub API and updates the card list
accordingly.
30) How does the GitHub Card List App handle asynchronous operations when
fetching user data from the GitHub API? 1M
A) By using the fetch API with async/await syntax inside the useEffect hook.
B) By using synchronous AJAX requests within the component's lifecycle
methods.
C) By manually handling Promise chains with callbacks passed to the fetch
API.
D) By utilizing third-party libraries like Axios to manage asynchronous
requests.
31) In the GitHub Card List App, how can you pass profile data from the CardList
Component to the Card Component? 1M
A) By directly importing the profile data into the Card Component.
B) By using context API to share the profile data between components.
C) By passing the profile data as props when rendering the Card
Component within the CardList Component.
D) By storing the profile data in a global state management system like
Redux and accessing it from the Card Component.
32) How can you ensure that the Card component remains decoupled and
reusable while displaying profile data? 1M
A) By directly fetching profile data within the Card component.
B) By storing profile data in a global state management system like Redux
and accessing it from the Card component.
C) By passing profile data as props to the Card component and letting it
handle the display logic internally.
D) By using context API to share profile data between components without
passing it as props.
33) Which React feature allows you to efficiently manage and update the UI in
response to changes in profile data? 0M
A) Context API
B) Component lifecycle methods
C) State management with hooks like useState
D) Virtual DOM reconciliation
34) What is the purpose of the CardList component in the GitHub Card List App?
A) To render a form for users to input GitHub usernames. 1M
B) To display a list of GitHub user cards, each representing a user's profile.
C) To handle form submissions and retrieve user data from the GitHub API.
D) To provide navigation links for users to view individual GitHub profiles.
35) What is the benefit of decoupling profile data from the Card component and
making it reusable and generic? 1M
A) It allows for dynamic rendering of profile cards based on user
interactions.
B) It reduces the complexity of the Card component and promotes
reusability.
C) It eliminates the need for the Card component to fetch profile data,
reducing network requests.
D) It enables direct manipulation of profile data within the Card component,
improving performance.
36) In a React component, how would you use useEffect to fetch data from an
API when the component mounts? 1M
A) useEffect(() => { fetchData(); });
B) useEffect(() => { fetchData(); }, [data]);
C) useEffect(() => { fetchData(); }, []);
D) useEffect(() => { fetchData(); }, [fetchData]);
37) What happens if you omit the dependency array in useEffect when you have
a variable used inside the effect? 1M
A) The effect will not run.
B) The effect will run only once.
C) The effect may reference stale or outdated values.
D) The effect will cause a memory leak.
38) In a React component, how would you handle cleanup of a side-effect such
as removing an event listener when the component unmounts using useEffect?
A) useEffect(() => { window.addEventListener('click', handleClick); return () 1 M
=> { handleClick(); }; }, []);
B) useEffect(() => { window.addEventListener('click', handleClick); }, []);
C) useEffect(() => { window.addEventListener('click', handleClick); return
window.removeEventListener('click', handleClick); }, []);
D) useEffect(() => { window.addEventListener('click', handleClick); return ()
=> { window.removeEventListener('click', handleClick); }; }, []);
39) In a React component, how would you ensure that an effect runs only once
after the initial render using useEffect? 1M
A) Use an empty dependency array ([]).
B) Use a dependency array with the value null.
C) Use a dependency array with the value undefined.
D) Omit the dependency array.
41) import React, { useState, useEffect } from 'react'; const Counter = () => { const
[count, setCount] = useState(0); useEffect(() => { document.title = `Count:
${count}`; }, [count]); const incrementCount = () => { setCount(count + 1); };
return (
Count: {count}
Increment
); }; export default Counter; What effect does the useEffect hook have in this
component? 1M
A) It updates the document title with the current count whenever the
component mounts.
B) It updates the document title with the current count whenever the count
state changes.
C) It increments the count state by 1 every time the component renders.
D) It increments the count state by 1 every time the Increment button is
clicked.
42) Consider the following React Router setup: import { BrowserRouter, Routes,
Route } from 'react-router-dom'; function App() { return ( } /> } /> ); } What does
the path="*" attribute accomplish in this code snippet? 1M
A) It sets up a route for the Home page.
B) It sets up a route for all pages.
C) It sets up a route for non-existent pages.
D) It sets up a route for query parameters.
43) Consider the following React Router setup: import { BrowserRouter, Routes,
Route } from 'react-router-dom'; function App() { return ( } /> ); } How would you
access the productId parameter in the ProductDetails component? 1M
A) const { productId } = useNavigate();
B) const { productId } = useRouteMatch();
C) const { productId } = useParams();
D) const { productId } = useDispatch();
46) How do you define a route in React Router that renders a component when a
specific path is matched? 1M
A) Using the <Link> component
B) Using the path prop in a <Route> component
C) Using the to prop in a <Link> component
D) Using the <Routes> component
47) What is the purpose of the defaultValue attribute in HTML input elements? 1 M
A) It sets the initial value of the input field.
B) It defines a default style for the input field.
C) It specifies the minimum value allowed for numeric input fields.
D) It prevents the user from changing the input value.
48) In a controlled input form in React, what should be the initial value of the
state variable representing the input field value? 1M
A) null
B) undefined
C) An empty string ('')
D) It doesn't matter; it's automatically initialized by React.
49) Which React hook is commonly used for managing state in functional
components? 1M
A) useContext
B) useEffect
C) useState
D) useReducer