React

1) In theIntermediate
GitHub Card ListAssessment
App implemented in React, what
Time :- 59:57 Min
is the purpose of the Card component?
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.

2) How does the GitHub Card List App handle asynchronous operations when
fetching user data from the GitHub API?
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 met
hods.
C) By manually handling Promise chains with callbacks passed to the fetch
API.
D) By utilizing third-party libraries like Axios to manage asynchronous reque
sts.

3) How can you handle changes to multiple input fields in React?

A) By directly modifying the input field values in the component's render met
hod.
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.

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

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

5) How can you ensure that the Card component remains decoupled and
reusable while displaying profile data?
A) By directly fetching profile data within the Card component.
B) By storing profile data in a global state management system like Redux a
nd accessing it from the Card component.
 C) By passing profile data as props to the Card component and letting it ha
ndle the display logic internally.
D) By using context API to share profile data between components without p
assing it as props.

6) How do you define a route in React Router that renders a component when a
specific path is matched?
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

7) What is the purpose of the Switch component in React Router?

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.

8) What is an uncontrolled input in React?

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.

9) In the GitHub Card List App implemented in React, what role does the Form
component play?
A) It renders a form for users to input GitHub usernames and add them to th
e 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 clicke
d.
D) It fetches user data from the GitHub API and updates the card list accordi
ngly.

10) How does React Router Dom handle navigation between pages in a Single
Page Application (SPA)?
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.

11) What is the purpose of the defaultValue attribute in HTML input elements?
 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.

12) What happens if you omit the dependency array in useEffect when you have
a variable used inside the effect?
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.

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

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

14) 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?
A) It updates the document title with the current count whenever the compo
nent mounts.
B) It updates the document title with the current count whenever the count s
tate 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 click
ed.

15) How can you manage multiple input fields in a React component?
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.
16) What is a common side-effect scenario in React when using the useEffect
hook?
A) Memory leaks
B) Infinite loop
C) Unnecessary re-renders
D) State mutations

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

A) To update the state of a component
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

18) What is the role of the component in React Router Dom?

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.

19) 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?
A) componentDidMount
B) shouldComponentUpdate
C) componentDidUpdate
D) componentWillUnmount

20) How can you manage multiple input fields in a React component?
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.

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

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

22) In a React component, suppose you have a state variable data that is
initialized with an API response. How would you handle cleanup if the API request
is canceled before completion using useEffect?

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

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

24) In a React component, how would you use useEffect to fetch data from an
API when the component mounts?
A) useEffect(() => { fetchData(); });
B) useEffect(() => { fetchData(); }, [data]);
C) useEffect(() => { fetchData(); }, []);
D) useEffect(() => { fetchData(); }, [fetchData]);

25) 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?
A) const { productId } = useNavigate();
B) const { productId } = useRouteMatch();
C) const { productId } = useParams();
D) const { productId } = useDispatch();

26) When calling an API in a React application, what technique can be used to
handle loading states and errors?
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.

27) When should you use controlled inputs in React?

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.

28) What is the primary advantage of using React Router Dom in a React
application?
A) It reduces the number of HTTP requests required to navigate between pa
ges.
 B) It simplifies the implementation of Single Page Applications (SPAs) by han
dling routing logic.
C) It improves the performance of the application by preloading assets for f
aster navigation.
D) It enables server-side rendering for better SEO optimization.

29) What is the purpose of the useNavigate hook in React Router?

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

30) What is the primary advantage of using controlled inputs in React?

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

31) 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 () =
> { handleClick(); }; }, []);
B) useEffect(() => { window.addEventListener('click', handleClick); }, []);
C) useEffect(() => { window.addEventListener('click', handleClick); return win
dow.removeEventListener('click', handleClick); }, []);
D) useEffect(() => { window.addEventListener('click', handleClick); return () =
> { window.removeEventListener('click', handleClick); }; }, []);

32) What is the purpose of the useParams hook in React Router?

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.

33) In the GitHub Card List App, how can you pass profile data from the CardList
Component to the Card Component?
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 Componen
t within the CardList Component.
 D) By storing the profile data in a global state management system like Red
ux and accessing it from the Card Component.

34) In react, the key should be?

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

35) In a controlled input form in React, what should be the initial value of the
state variable representing the input field value?
A) null
B) undefined
C) An empty string ('')
D) It doesn't matter; it's automatically initialized by React.

36) In a React component, how would you ensure that an effect runs only once
after the initial render using useEffect?
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.

37) Which React hook is commonly used for managing state in functional
components?
A) useContext
B) useEffect
C) useState
D) useReducer

38) Which statement is more suitable for the below code snippet?
useEffect(() => {

//Code logic

}, [data]);

A) Effect runs only when mounting

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

39) What is the purpose of the Redirect component in React Router?

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.

40) How can you pass parameters to a route in React Router Dom?
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 Rout
e.

41) What is a controlled input in React?

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.

42) 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.
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.

43) In a React class component, what method is typically used to update the
component's state after fetching data from an API?
A) componentDidMount
B) forceUpdate
C) componentDidUpdate
D) setState

44) Which React feature allows you to efficiently manage and update the UI in
response to changes in profile data?
A) Context API
B) Component lifecycle methods
C) State management with hooks like useState
D) Virtual DOM reconciliation

45) 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?
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.

46) 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?
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.

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

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

48) What is the benefit of using controlled input fields in React when managing
multiple input fields?
A) Controlled input fields require less code compared to uncontrolled input f
ields.
B) Controlled input fields provide better performance in large-scale applicat
ions.
C) Controlled input fields make it easier to synchronize input field values wit
h React state.
D) Controlled input fields allow for more flexibility in input field validation.

49) In React, when is the cleanup function returned by the useEffect hook
executed?
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.

50) In React Router Dom, what is the purpose of the Route component?
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 s
pecified in the Route component.
D) It provides navigation links for the user to switch between different pages
in the application.
SUBMIT