Assessment Name - React Intermediate Assessment ATTEMPTS LEFT : 1

TAKE ASSESSMENT (HTTPS://WINGZ.ITVEDANT.COM/INDEX.PHP/ASSIGNMENT-TEST-STUDENT/RETAKE-TEST?ID=179896)

Total Questions - 50 Score - (43 / 50) 86%

1) In react, the key should be? 1M

A) Unique among his siblings only
B) Unique in the DOM
C) Does not require to be unique
D) All of the above

2) What is the purpose of the useEffect() hook in React JS?

A) To update the state of a component 1M
B) To render a component to the DOM
C) To manage data within a component
D) To perform an action after a component has been rendered to the DOM

3) Which statement is more suitable for the below code snippet?

useEffect(() => {

//Code logic

}, [data]);

A) Effect runs only when mounting 1M

B) Effect re-runs if data value is true
C) Effect re-runs if and only if the value of the data variable changes
D) All of above

4) What is the purpose of the Redirect component in React Router? 1M

A) To redirect the user to a different route.
B) To render a component based on the current route.
C) To handle user authentication in React Router.
D) None of the above.

5) What is the purpose of the useNavigate hook in React Router? 1M

A) To navigate programmatically without needing access to the history
object.
B) To update the state of a component.
C) To render a component to the DOM.
 D) None of the above.

6) What is the purpose of the useParams hook in React Router? 1M

A) To update the state of a component.
B) To access the URL parameters of the current route.
C) To render a component to the DOM.
D) None of the above.

7) When calling an API in a React application, what technique can be used to

handle loading states and errors? 0M
A) Using conditional rendering based on the API response status code.
B) Utilizing the useEffect hook to manage loading and error states.
C) Wrapping the API call in a try-catch block to handle errors.
D) Implementing a loading spinner and error message component.

8) In a React class component, what method is typically used to update the

component's state after fetching data from an API? 0M
A) componentDidMount
B) forceUpdate
C) componentDidUpdate
D) setState

9) In a React class component, which lifecycle method is typically used to handle

side-effects, such as fetching data from an API or subscribing to events? 1M
A) componentDidMount
B) shouldComponentUpdate
C) componentDidUpdate
D) componentWillUnmount

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.

14) What is the role of the component in React Router Dom? 1M

A) It toggles between different routes based on user input.
B) It enables nested routing within a React application.
C) It ensures that only one route is matched and rendered at a time.
D) It provides navigation links for the user to navigate between pages.

15) Which package is commonly used in React applications to handle client-side

routing? 1M
A) React Router Dom
B) Bootstrap
C) Redux
D) Axios

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.

19) In React, which event handler is commonly used to handle changes to

controlled inputs? 1M
A) onClick
B) onChange
C) onSubmit
D) onInput

20) What is a controlled input in React? 1M

A) An input element whose value is controlled by React state.
B) An input element that does not have an associated state in React.
C) An input element that relies solely on the DOM for its value management.
D) An input element that is disabled and cannot be changed by the user.

21) What is an uncontrolled input in React? 1M

A) An input element whose value is controlled by React state.
B) An input element that does not have an associated state in React.
C) An input element that relies solely on the DOM for its value management.
D) An input element that is disabled and cannot be changed by the user.

22) What is the primary advantage of using controlled inputs in React? 1M

A) Controlled inputs are simpler to implement and require less code.
B) Controlled inputs provide better performance compared to uncontrolled
inputs.
C) Controlled inputs offer more flexibility and control over input behavior.
D) Controlled inputs improve accessibility for users with disabilities.

23) When should you use controlled inputs in React? 1M

A) When the input values need to be controlled and synchronized with React
state.
B) When the input values are static and do not change over time.
C) When the input values are managed directly by the DOM.
D) When you want to disable user input for certain input fields.

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.

40) In a React component, suppose you have a state variable isLoading

indicating whether data is being fetched. How would you run an effect only when
isLoading changes using useEffect? 1M
A) Pass an empty dependency array ([]).
B) Pass a dependency array with isLoading.
C) Use a conditional statement inside the effect.
 D) Use a separate useEffect hook for isLoading.

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();

44) Which of the following packages is commonly used to implement routing in

React applications? 1M
A) react-navigation
B) react-router
C) react-routing
D) react-router-dom

45) What hook is used to programmatically navigate to a different route in React

Router? 1M
 A) useRoute
B) useNavigate
C) useHistory
D) useLocation

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

50) What is the purpose of the preventDefault() method in form submission

handling in React? 1M
A) It stops the form from being submitted.
B) It prevents the default browser behavior of refreshing the page on form
submission.
C) It ensures that the form data is validated before submission.
D) It triggers a validation error message.