Scribd
Upload
6 views

quiz4

The document contains multiple choice questions and code analysis related to React, focusing on concepts like the Virtual DOM, functional components, hooks, and the useEffect hook. It also includes practical coding examples that demonstrate fetching data from an API and handling component lifecycle events. Additionally, a GitHub link is provided for further reference.

Uploaded by

zaridzetornike43
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

quiz4

The document contains multiple choice questions and code analysis related to React, focusing on concepts like the Virtual DOM, functional components, hooks, and the useEffect hook. It also includes practical coding examples that demonstrate fetching data from an API and handling component lifecycle events. Additionally, a GitHub link is provided for further reference.

Uploaded by

zaridzetornike43
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Section A: Multiple Choice Questions

1. What is the primary purpose of React's Virtual DOM?

b) To minimize direct manipulation of the actual DOM for better performance

2. Which of the following is true about React functional components?

b) They can use hooks like useState and useEffect to manage state and side effects

3. What is the correct way to update the state in a functional component?

c) const [count, setCount] = useState(0); setCount(1)

4. What does the useEffect hook do?

c) It is used to create reusable logic for components

5.Which of the following is NOT a valid React hook?

d) useComponent

6. What is the purpose of keys in React lists?

a) To uniquely identify elements in a list and optimize rendering

7. What is the output of the following code?

const App = () => {


const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1);
}, []);
return <div>{count}</div>;
};

b) 1

8. What is the purpose of React Fragments?

a) To group multiple elements without adding extra nodes to the DOM

Section B: Code Analysis

1. Analyze the following code and explain what it does. Identify any potential
issues.

jsx
Copy
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};

This code fetches a API, do a request and asignes a key and renders the list with
data

2. What will be the output of the following code, and why?

const App = () => {


const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component mounted');
return () => console.log('Component unmounted');
}, []);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<p>{count}</p>
</div>
);
};

When you click the button the value updates, if coponet is mounted it Will put
"component mounted" and if is not it Will put "component unmouted"

Section C: Practical Coding

GitHub:
https://github.com/Tornike765/quiz4

You might also like