Lecture Notes Of Day 20: Handling Async Operations in React
Objective
Today, we will learn
how to handle asynchronous operations in React. By the end of this lecture, you
will be able to use async/await within the useEffect hook or event handlers to
fetch data asynchronously.
Overview of Asynchronous
Operations
Asynchronous operations
are tasks that run in the background, allowing the main thread to continue
executing other code. In web development, this is particularly important for
tasks like fetching data from an API, where waiting for a response can lead to
a poor user experience if handled synchronously.
Why Use Async/Await?
Readability:
async/await makes asynchronous code look and behave more like synchronous code,
which can be easier to read and understand.
Error Handling: It
allows for more straightforward error handling using try/catch blocks.
Key Concepts
Promises: A Promise is
an object that represents the eventual completion (or failure) of an
asynchronous operation and its resulting value. A Promise can be in one of
three states: pending, fulfilled, or rejected.
Async Functions: An
async function is a function that always returns a Promise. The await keyword
can only be used inside async functions, and it pauses the execution of the
function until the Promise is resolved.
useEffect Hook: The
useEffect hook allows you to perform side effects in function components. It
runs after the render is committed to the screen, making it a suitable place
for data fetching.
Setting Up a React
Component with Async Operations
Step 1: Create a New
React Component
Let's create a simple
React component that fetches data from an API.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useEffect, useState } from 'react';
const
DataFetchingComponent = () => {
const [data, setData] = useState(null);
const [loading, setLoading] =
useState(true);
const [error, setError] = useState(null);
// Fetch data using useEffect
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const result = await
response.json();
setData(result);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
fetchData();
}, []); // Empty dependency array means
this effect runs once after the initial render
if (loading) return
<div>Loading...</div>;
if (error) return <div>Error:
{error}</div>;
return (
<div>
<h1>Data:</h1>
<pre>{JSON.stringify(data,
null, 2)}</pre>
</div>
);
};
export default
DataFetchingComponent;
Step 2: Explanation of
the Code
State Management: We
use useState to manage three pieces of state: data, loading, and error.
useEffect: The
useEffect hook is used to perform the data fetching when the component mounts.
The empty dependency array [] ensures that the effect runs only once.
Async Function: Inside
useEffect, we define an async function fetchData to handle the fetching logic.
Error Handling: We use
a try/catch block to handle any errors that may occur during the fetch
operation.
Loading State: We set
loading to false in the finally block to ensure it gets updated regardless of
success or failure.
Handling Async
Operations in Event Handlers
You can also use
async/await in event handlers. Here’s an example of how to do that:
jsx
Verify
Open In Editor
Edit
Copy code
const FetchButton = ()
=> {
const [data, setData] = useState(null);
const [loading, setLoading] =
useState(false);
const [error, setError] = useState(null);
const handleFetchData = async () => {
setLoading(true);
setError(null);
try {
const response = await
fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const result = await
response.json();
setData(result);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
return (
<div>
<button
onClick={handleFetchData}>Fetch Data</button>
{loading &&
<div>Loading...</div>}
{error && <div>Error:
{error}</div>}
{data && (
<div>
<h1>Data:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)}
</div>
);
};
export default
FetchButton;
Explanation of the
Event Handler Code
State Management:
Similar to the previous example, we manage data, loading, and error states.
Event Handler: The
handleFetchData function is defined as an async function, allowing us to use
await for the fetch operation.
Button Click: When the
button is clicked, handleFetchData is triggered, initiating the data fetch
process.
Loading and Error
States: We update the loading state before and after the fetch operation and
handle any errors that may occur.
Conclusion
In this lecture, we
covered how to handle asynchronous operations in React using async/await. We
learned how to fetch data within the useEffect hook and in event handlers,
ensuring a smooth user experience by managing loading and error states
effectively. As you continue to build your React applications, mastering async
operations will be crucial for working with APIs and dynamic data. ###
Additional Tips for Handling Async Operations
Cleanup Function in
useEffect: If your component unmounts before the async operation completes, you
may want to cancel the operation or ignore the result. You can return a cleanup
function from useEffect to handle this.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
let isMounted = true; // Track if the
component is mounted
const fetchData = async () => {
try {
const response = await
fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const result = await
response.json();
if (isMounted) {
setData(result);
}
} catch (error) {
if (isMounted) {
setError(error.message);
}
} finally {
if (isMounted) {
setLoading(false);
}
}
};
fetchData();
return () => {
isMounted = false; // Cleanup function
to set isMounted to false
};
}, []);
AbortController: For
more complex scenarios, especially when dealing with fetch requests, you can
use the AbortController to cancel ongoing requests when the component unmounts.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;
const fetchData = async () => {
try {
const response = await
fetch('https://api.example.com/data', { signal });
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const result = await
response.json();
setData(result);
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
setError(error.message);
}
} finally {
setLoading(false);
}
};
fetchData();
return () => {
controller.abort(); // Abort the fetch
request on cleanup
};
}, []);
Handling Multiple Async
Operations: If you need to handle multiple async operations, consider using
Promise.all to run them concurrently. This can be useful when you need to fetch
data from multiple sources.
jsx
Verify
Open In Editor
Edit
Copy code
const fetchMultipleData
= async () => {
try {
const [response1, response2] = await
Promise.all([
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2'),
]);
const data1 = await response1.json();
const data2 = await response2.json();
setData({ data1, data2 });
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
Best Practices
Error Boundaries:
Consider implementing error boundaries in your application to catch errors in
the component tree and display a fallback UI.
Loading Indicators:
Always provide feedback to users during loading states to enhance user
experience.
Data Caching: For
performance optimization, consider caching data to avoid unnecessary fetch
requests.
Summary
Handling async
operations in React is essential for building responsive applications. By using
async/await, you can write cleaner and more manageable code. Remember to handle
loading and error states effectively, and consider cleanup strategies to
prevent memory leaks. As you practice these concepts, you'll become more
proficient in managing asynchronous data in your React applications.
You
WRITE SOME ASSIGNMENTS
FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with explanation
BLACKBOXAI
Sure! Here are some
assignments based on the concepts of handling asynchronous operations in React,
along with step-by-step solutions and explanations.
Assignment 1: Fetching
User Data from an API
Objective: Create a
React component that fetches user data from a public API and displays it.
Instructions:
Create a new React
component called User List.
Use the useEffect hook
to fetch data from the API endpoint https://jsonplaceholder.typicode.com/users.
Display the list of
users' names in a <ul> element.
Handle loading and
error states.
Step-by-Step Solution
Set Up the Component:
Create a new file called User List.js and import the necessary hooks.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useEffect, useState } from 'react';
const UserList = ()
=> {
const [users, setUsers] = useState([]);
const [loading, setLoading] =
useState(true);
const [error, setError] = useState(null);
Fetch Data in
useEffect: Use the useEffect hook to fetch user data when the component mounts.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const data = await
response.json();
setUsers(data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
Render the Component:
Handle loading and error states, and render the list of users.
jsx
Verify
Open In Editor
Edit
Copy code
if (loading) return
<div>Loading...</div>;
if (error) return <div>Error:
{error}</div>;
return (
<div>
<h1>User List</h1>
<ul>
{users.map(user => (
<li
key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default
UserList;
Explanation:
We use useState to
manage users, loading, and error states.
The fetchUsers function
is defined as an async function inside useEffect, which fetches data from the
API.
We handle loading and
error states appropriately, ensuring a good user experience.
Assignment 2: Fetching
Data on Button Click
Objective: Create a React
component that fetches data from an API when a button is clicked.
Instructions:
Create a new React
component called PostFetcher.
Use the useState hook
to manage the fetched post data, loading state, and error state.
Create a button that,
when clicked, fetches data from the API endpoint
https://jsonplaceholder.typicode.com/posts/1.
Display the post title
and body.
Step-by-Step Solution
Set Up the Component:
Create a new file called PostFetcher.js and import the necessary hooks.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useState } from 'react';
const PostFetcher = ()
=> {
const [post, setPost] = useState(null);
const [loading, setLoading] =
useState(false);
const [error, setError] = useState(null);
Create the Fetch
Function: Define an async function to fetch the post data.
jsx
Verify
Open In Editor
Edit
Copy code
const fetchPost = async () => {
setLoading(true);
setError(null);
try {
const response = await
fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const data = await response.json();
setPost(data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
Render the Component:
Create a button to trigger the fetch function and display the post data.
jsx
Verify
Open In Editor
Edit
Copy code
return (
<div>
<button
onClick={fetchPost}>Fetch Post</button>
{loading &&
<div>Loading...</div>}
{error && <div>Error:
{error}</div>}
{post && (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
)}
</div>
);
};
export default
PostFetcher;
Explanation:
We manage post,
loading, and error states using useState.
The fetchPost function
is defined to fetch data from the API when the button is clicked.
We handle loading and
error states, and display the post title and body once the data is fetched
successfully.
Assignment 3: Fetching
Multiple Resources
Objective: Create a
React component that fetches data from two different API endpoints and displays
the results.
Instructions:
Create a new React
component called CombinedDataFetcher.
Use the useEffect hook
to fetch data from the API endpoints https://jsonplaceholder.typicode.com/users
and https://jsonplaceholder.typicode.com/posts.
Display the number of
users and the titles of the posts.
Handle loading and
error states.
Step-by-Step Solution
Set Up the Component:
Create a new file called CombinedDataFetcher.js and import the necessary hooks.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useEffect, useState } from 'react';
const
CombinedDataFetcher = () => {
const [users, setUsers] = useState([]);
const [posts, setPosts] = useState([]);
const [loading, setLoading] =
useState(true);
const [error, setError] = useState(null);
Fetch Data in
useEffect: Use the useEffect hook to fetch data from both endpoints.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
const fetchData = async () => {
try {
const [usersResponse,
postsResponse] = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/users'),
fetch('https://jsonplaceholder.typicode.com/posts'),
]);
if (!usersResponse.ok ||
!postsResponse.ok) {
throw new Error('Network
response was not ok');
}
const usersData = await
usersResponse.json();
const postsData = await
postsResponse.json();
setUsers(usersData);
setPosts(postsData);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
Render the Component:
Handle loading and error states, and display the number of users and post
titles.
jsx
Verify
Open In Editor
Edit
Copy code
if (loading) return
<div>Loading...</div>;
if
(error) return <div>Error: {error}</div>;
return (
<div>
<h1>Number of Users:
{users.length}</h1>
<h2>Post Titles:</h2>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
};
export default
CombinedDataFetcher;
Explanation:
We manage users, posts,
loading, and error states using useState.
The fetchData function
uses Promise.all to fetch data from both endpoints concurrently.
We handle loading and
error states, and display the number of users and the titles of the posts.
Summary of Assignments
These assignments help
reinforce the concepts of handling asynchronous operations in React. By
creating components that fetch data from APIs, students will gain practical
experience in using async/await, managing loading and error states, and
rendering data conditionally. Encourage students to experiment with different
APIs and enhance the components with additional features, such as pagination or
filtering. ### Assignment 4: Implementing a Search Feature
Objective: Create a
React component that allows users to search for posts by title.
Instructions:
Create a new React
component called PostSearch.
Use the useState hook
to manage the search term, fetched posts, loading state, and error state.
Create an input field
for the search term and a button to trigger the search.
Fetch posts from the
API endpoint https://jsonplaceholder.typicode.com/posts and filter them based
on the search term.
Display the filtered
post titles.
Step-by-Step Solution
Set Up the Component:
Create a new file called PostSearch.js and import the necessary hooks.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useEffect, useState } from 'react';
const PostSearch = ()
=> {
const [posts, setPosts] = useState([]);
const [searchTerm, setSearchTerm] =
useState('');
const [loading, setLoading] =
useState(true);
const [error, setError] = useState(null);
Fetch Data in
useEffect: Use the useEffect hook to fetch all posts when the component mounts.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await
fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const data = await
response.json();
setPosts(data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
fetchPosts();
}, []);
Handle Search: Create a
function to filter posts based on the search term.
jsx
Verify
Open In Editor
Edit
Copy code
const handleSearch = () => {
if (!searchTerm) return posts; //
Return all posts if search term is empty
return posts.filter(post =>
post.title.toLowerCase().includes(searchTerm.toLowerCase()));
};
Render the Component:
Create an input field and a button for the search, and display the filtered
post titles.
jsx
Verify
Open In Editor
Edit
Copy code
if (loading) return
<div>Loading...</div>;
if (error) return <div>Error:
{error}</div>;
const filteredPosts = handleSearch();
return (
<div>
<h1>Search Posts</h1>
<input
type="text"
value={searchTerm}
onChange={(e) =>
setSearchTerm(e.target.value)}
placeholder="Search by
title"
/>
<ul>
{filteredPosts.map(post => (
<li
key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
};
export default
PostSearch;
Explanation:
We manage posts,
searchTerm, loading, and error states using useState.
The fetchPosts function
retrieves all posts from the API when the component mounts.
The handleSearch
function filters the posts based on the search term entered by the user.
We render an input
field for the search term and display the filtered post titles.
Assignment 5:
Implementing Pagination
Objective: Create a
React component that implements pagination for displaying posts.
Instructions:
Create a new React
component called PaginatedPosts.
Use the useState hook
to manage the posts, current page, loading state, and error state.
Fetch posts from the
API endpoint https://jsonplaceholder.typicode.com/posts.
Display a limited
number of posts per page (e.g., 5).
Create buttons to
navigate between pages.
Step-by-Step Solution
Set Up the Component:
Create a new file called PaginatedPosts.js and import the necessary hooks.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useEffect, useState } from 'react';
const PaginatedPosts =
() => {
const [posts, setPosts] = useState([]);
const [loading, setLoading] =
useState(true);
const [error, setError] = useState(null);
const [currentPage, setCurrentPage] =
useState(1);
const postsPerPage = 5;
Fetch Data in
useEffect: Use the useEffect hook to fetch posts when the component mounts.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await
fetch('https://jsonplaceholder .typicode.com/posts');
if (!response.ok) {
throw new Error('Network response
was not ok');
}
const data = await
response.json();
setPosts(data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
fetchPosts();
}, []);
Calculate Pagination:
Create a function to get the current posts based on the current page.
jsx
Verify
Open In Editor
Edit
Copy code
const indexOfLastPost = currentPage *
postsPerPage;
const indexOfFirstPost = indexOfLastPost -
postsPerPage;
const currentPosts =
posts.slice(indexOfFirstPost, indexOfLastPost);
Handle Page Change:
Create functions to handle page changes.
jsx
Verify
Open In Editor
Edit
Copy code
const handleNextPage = () => {
if (currentPage <
Math.ceil(posts.length / postsPerPage)) {
setCurrentPage(currentPage + 1);
}
};
const handlePreviousPage = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};
Render the Component:
Display the current posts and pagination buttons.
jsx
Verify
Open In Editor
Edit
Copy code
if (loading) return
<div>Loading...</div>;
if (error) return <div>Error:
{error}</div>;
return (
<div>
<h1>Paginated
Posts</h1>
<ul>
{currentPosts.map(post => (
<li
key={post.id}>{post.title}</li>
))}
</ul>
<button
onClick={handlePreviousPage} disabled={currentPage === 1}>
Previous
</button>
<button onClick={handleNextPage}
disabled={currentPage >= Math.ceil(posts.length / postsPerPage)}>
Next
</button>
</div>
);
};
export default
PaginatedPosts;
Explanation:
We manage posts,
loading, error, and currentPage states using useState.
The fetchPosts function
retrieves all posts from the API when the component mounts.
We calculate the
indices for slicing the posts array to get the current posts based on the
current page.
The handleNextPage and
handlePreviousPage functions update the current page state, allowing users to
navigate through the pages.
We render the current
posts and provide buttons for pagination.
Summary of Assignments
These assignments
provide a comprehensive understanding of handling asynchronous operations in
React, including fetching data, managing loading and error states, implementing
search functionality, and creating pagination. Encourage students to explore
further by adding features like sorting, filtering, or enhancing the UI with
CSS frameworks. ### Assignment 6: Implementing a Refresh Feature
Objective: Create a
React component that allows users to refresh the data displayed.
Instructions:
Create a new React
component called RefreshableData.
Use the useState hook
to manage the fetched data, loading state, and error state.
Fetch data from the API
endpoint https://jsonplaceholder.typicode.com/posts.
Create a button that,
when clicked, refreshes the data.
Display the post
titles.
Step-by-Step Solution
Set Up the Component:
Create a new file called RefreshableData.js and import the necessary hooks.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useEffect, useState } from 'react';
const RefreshableData =
() => {
const [posts, setPosts] = useState([]);
const [loading, setLoading] =
useState(true);
const [error, setError] = useState(null);
Fetch Data Function:
Create a function to fetch the posts from the API.
jsx
Verify
Open In Editor
Edit
Copy code
const fetchPosts = async () => {
setLoading(true);
setError(null);
try {
const response = await
fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const data = await response.json();
setPosts(data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
Use useEffect to Fetch
Data on Mount: Call the fetchPosts function when the component mounts.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
fetchPosts();
}, []);
Create Refresh Button:
Add a button that calls the fetchPosts function to refresh the data.
jsx
Verify
Open In Editor
Edit
Copy code
return (
<div>
<h1>Posts</h1>
<button
onClick={fetchPosts}>Refresh Data</button>
{loading &&
<div>Loading...</div>}
{error && <div>Error:
{error}</div>}
<ul>
{posts.map(post => (
<li
key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
};
export default
RefreshableData;
Explanation:
We manage posts,
loading, and error states using useState.
The fetchPosts function
retrieves posts from the API and updates the state accordingly.
The useEffect hook
calls fetchPosts when the component mounts to load the initial data.
The refresh button
allows users to fetch the latest data from the API.
Assignment 7:
Displaying Detailed Post Information
Objective: Create a
React component that displays detailed information about a selected post.
Instructions:
Create a new React
component called PostDetail.
Use the useState hook
to manage the post data, loading state, and error state.
Fetch data from the API
endpoint https://jsonplaceholder.typicode.com/posts/:id based on a selected
post ID.
Display the post title,
body, and user ID.
Create a button to go
back to the list of posts.
Step-by-Step Solution
Set Up the Component:
Create a new file called PostDetail.js and import the necessary hooks.
jsx
Verify
Open In Editor
Edit
Copy code
import React, {
useEffect, useState } from 'react';
const PostDetail = ({
postId }) => {
const [post, setPost] = useState(null);
const [loading, setLoading] =
useState(true);
const [error, setError] = useState(null);
Fetch Data in
useEffect: Use the useEffect hook to fetch the post data based on the postId
prop.
jsx
Verify
Open In Editor
Edit
Copy code
useEffect(() => {
const fetchPost = async () => {
setLoading(true);
setError(null);
try {
const response = await
fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
if (!response.ok) {
throw new Error('Network
response was not ok');
}
const data = await
response.json();
setPost(data);
} catch (error) {
setError(error.message);
} finally {
setLoading(false);
}
};
fetchPost();
}, [postId]);
Render the Component:
Display the post details and a button to go back.
jsx
Verify
Open In Editor
Edit
Copy code
if (loading) return
<div>Loading...</div>;
if (error) return <div>Error:
{error}</div>;
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
<p>User ID:
{post.userId}</p>
<button onClick={() =>
window.history.back()}>Back to Posts</button>
</div>
);
};
export default
PostDetail;
Explanation:
We manage post,
loading, and error states using useState.
The fetchPost function
retrieves the post data based on the postId prop when the component mounts or
when the postId changes.
We handle loading and
error states, and display the post title, body, and user ID.
The back button allows
users to return to the previous page.
Summary of Assignments
These assignments
provide a comprehensive understanding of handling asynchronous operations in
React, including refreshing data, displaying detailed information, and managing
state effectively. Encourage students to explore further by adding features
like routing to navigate between the list of posts and the detailed view, or
implementing a loading spinner for better user experience.
You
WRITE 100 no of MCQs
only FROM ABOVE CONCEPT with explanation
BLACKBOXAI
Here are 100
multiple-choice questions (MCQs) based on the concepts of handling asynchronous
operations in React, particularly focusing on async/await, useEffect, and data
fetching. Each question is followed by the correct answer and a brief
explanation.
MCQs on Handling Async
Operations in React
What does the async
keyword do in JavaScript?
A) Makes a function
synchronous
B) Makes a function
return a Promise
C) Makes a function
return an array
D) Makes a function
return an object
Answer: B
Explanation: The async
keyword allows a function to return a Promise, enabling the use of await within
it.
What is the purpose of
the await keyword?
A) To pause the
execution of a function until a Promise is resolved
B) To create a new
Promise
C) To handle errors in
a Promise
D) To convert a
function to an async function
Answer: A
Explanation: The await
keyword pauses the execution of an async function until the Promise is
resolved.
Which hook is used to
perform side effects in functional components?
A) useState
B) useEffect
C) useReducer
D) useContext
Answer: B
Explanation: The
useEffect hook is used to perform side effects, such as data fetching, in
functional components.
What is the default
behavior of useEffect if no dependency array is provided?
A) It runs only once
B) It runs on every
render
C) It runs only on
unmount
D) It runs only on
mount
Answer: B
Explanation: If no
dependency array is provided, useEffect runs after every render.
What will happen if you
call setState inside useEffect?
A) It will cause an
infinite loop
B) It will not update
the state
C) It will update the
state and re-render the component
D) It will throw an
error
Answer: C
Explanation: Calling
setState inside useEffect will update the state and trigger a re-render of the
component.
What is the purpose of
the finally block in a try-catch statement?
A) To handle errors
B) To execute code
regardless of success or failure
C) To define a fallback
value
D) To return a value
Answer: B
Explanation: The
finally block executes code regardless of whether the try block succeeded or
the catch block handled an error.
Which of the following
is a valid way to handle errors in an async function?
A) Using a try-catch
block
B) Using a Promise's
.catch() method
C) Both A and B
D) None of the above
Answer: C
Explanation: Both
try-catch blocks and the .catch() method can be used to handle errors in async
functions.
What does the useState
hook return?
A) An array with the
current state and a function to update it
B) An object with the
current state and a function to update it
C) A string
representing the state
D) A number
representing the state
Answer: A
Explanation: The
useState hook returns an array containing the current state and a function to
update that state.
What is the purpose of
the dependency array in useEffect?
A) To specify when the
effect should run
B) To define the state
variables
C) To handle errors
D) To return a value
Answer: A
Explanation: The
dependency array specifies when the effect should run based on the values it
contains.
What will happen if you
pass an empty array as a dependency to useEffect?
A) The effect will run
on every render
B) The effect will run
only once after the initial render
C) The effect will
never run
D) The effect will run
on unmount
Answer: B
Explanation: An empty
array as a dependency means the effect will run only once after the initial
render.
Which of the following
is a valid way to fetch data in a React component?
A) Using fetch inside
useEffect
B) Using fetch inside
the render method
C) Using fetch inside a
class component's lifecycle method
D) Both A and C
Answer: D
Explanation: Data can
be fetched using fetch inside useEffect in functional components or inside
lifecycle methods in class components.
What is the purpose of
the setLoading state in a data-fetching component?
A) To track the number
of items fetched
B) To indicate whether
data is currently being loaded
C) To store the fetched
data
D) To handle errors
Answer: B
Explanation: The
setLoading state is used to indicate whether data is currently being loaded,
which can be used to show a loading spinner or message.
What will happen if you
call setState with the same value as the current state?
A) It will cause an
error
B) It will trigger a
re-render
C) It will not trigger
a re-render
D) It will reset the
state
Answer: C
Explanation: Calling
setState with the same value as the current state will not trigger a re-render,
as React optimizes rendering.
How can you prevent an
effect from running on every render?
A) By using a return
statement
B) By using a condition
inside the effect
C) By providing a
dependency array
D) By using useMemo
Answer: C
Explanation: Providing
a dependency array to useEffect allows you to control when the effect runs,
preventing it from running on every render.
What is the correct way
to handle multiple asynchronous requests in React?
A) Using Promise.all
B) Using async/await in
a loop
C) Making requests
sequentially
D) Both A and B
Answer: D
Explanation: You can
handle multiple asynchronous requests using Promise.all to run them
concurrently or using async/await in a loop for sequential execution.
What is the purpose of
the catch block in a try-catch statement?
A) To execute code
regardless of success or failure
B) To handle errors
that occur in the try block
C) To define a fallback
value
D) To return a value
Answer: B
Explanation: The catch
block is used to handle errors that occur in the try block.
Which of the following
is a common way to display loading state in a React component?
A) Using a spinner or
loading message
B) Hiding the component
C) Displaying an error
message
D) Returning null
Answer: A
Explanation: A common
way to indicate loading state is to display a spinner or loading message while
data is being fetched.
What is the purpose of
the useEffect cleanup function?
A) To reset the state
B) To perform cleanup
tasks when the component unmounts or before the effect runs again
C) To handle errors
D) To return a value
Answer: B
Explanation: The
cleanup function in useEffect is used to perform cleanup tasks, such as
canceling subscriptions or clearing timers, when the component unmounts or
before the effect runs again.
What will happen if you
try to update the state after a component has unmounted?
A) It will throw an
error
B) It will update the
state
C) It will cause a
memory leak
D) It will not affect
anything
Answer: A
Explanation: Trying to
update the state after a component has unmounted can lead to errors, which is
why cleanup functions are important.
How can you pass
parameters to an async function in useEffect?
A) By using a closure
B) By defining the
function inside useEffect
C) By using an arrow
function
D) All of the above
Answer: D
Explanation: You can
pass parameters to an async function in useEffect by using a closure, defining
the function inside useEffect, or using an arrow function.
What is the purpose of
the useReducer hook?
A) To manage local
component state
B) To manage complex
state logic
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useReducer hook is used to manage complex state logic in a component, similar
to how Redux works.
Which of the following
is a valid way to handle multiple state updates in React?
A) Using setState
multiple times
B) Using a functional
update
C) Using useReducer
D) All of the above
Answer: D
Explanation: You can
handle multiple state updates using setState multiple times, a functional
update, or by using useReducer.
What is the purpose of
the useContext hook?
A) To manage local
state
B) To share state
across components
C) To perform side
effects
D) To handle routing
Answer: B
Explanation: The
useContext hook is used to share state across components without having to pass
props down manually.
What will happen if you
call setState with an object that has the same keys as the current state?
A) It will merge the
states
B) It will replace the
state
C) It will throw an
error
D) It will not update
the state
Answer: A
Explanation: Calling
setState with an object that has the same keys will merge the new state with
the current state.
What is the correct way
to handle a Promise rejection in an async function?
A) Using a try-catch
block
B) Using .catch()
C) Both A and B
D) None of the above
Answer: C
Explanation: You can
handle a Promise rejection in an async function using a try-catch block or the
.catch() method.
What is the purpose of
the useMemo hook?
A) To memoize values
and avoid unnecessary re-computations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useMemo hook is used to memoize values and avoid unnecessary re-computations
during renders.
Which of the following
is a valid way to cancel a fetch request in React?
A) Using
AbortController
B) Using a cleanup
function in useEffect
C) Both A and B
D) None of the above
Answer: C
Explanation: You can
cancel a fetch request using AbortController and by implementing a cleanup
function in useEffect.
What is the purpose of
the useRef hook?
A) To manage state
B) To create mutable
references
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The useRef
hook is used to create mutable references that persist for the full lifetime of
the component.
What will happen if you
call setState with a function?
A) It will replace the
state
B) It will merge the
state
C) It will update the
state based on the previous state
D) It will throw an
error
Answer: C
Explanation: Calling
setState with a function allows you to update the state based on the previous
state.
What is the purpose of
the useLayoutEffect hook?
A) To perform side
effects after rendering
B) To perform side
effects before the browser paints
C) To manage state
D) To handle context
Answer: B
Explanation: The
useLayoutEffect hook is used to perform side effects before the browser paints,
allowing for synchronous updates.
Which of the following
is a valid way to handle form submissions in React?
A) Using onSubmit event
handler
B - B) Using onClick
event handler
C) Using onChange event
handler
D) Both A and B
Answer: D
Explanation: You can
handle form submissions using the onSubmit event handler for the form element,
and you can also use onClick for buttons within the form.
What is the purpose of
the useImperativeHandle hook?
A) To manage state
B) To customize the
instance value that is exposed to parent components when using ref
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useImperativeHandle hook is used to customize the instance value that is
exposed to parent components when using ref.
What will happen if you
try to access a state variable before it is initialized?
A) It will throw an
error
B) It will return
undefined
C) It will return null
D) It will return the
initial state value
Answer: B
Explanation: Accessing
a state variable before it is initialized will return undefined.
Which of the following
is a valid way to pass props to a child component?
A) Using JSX attributes
B) Using the props
object
C) Both A and B
D) None of the above
Answer: C
Explanation: Props can
be passed to a child component using JSX attributes or by using the props
object.
What is the purpose of
the useDebugValue hook?
A) To manage state
B) To display a label
in React DevTools
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useDebugValue hook is used to display a label in React DevTools for custom
hooks.
What will happen if you
call setState with an array?
A) It will replace the
state with the array
B) It will merge the
state with the array
C) It will throw an
error
D) It will not update
the state
Answer: A
Explanation: Calling
setState with an array will replace the current state with the new array.
Which of the following
is a valid way to conditionally render a component in React?
A) Using a ternary
operator
B) Using an if
statement
C) Using logical AND
(&&)
D) All of the above
Answer: D
Explanation: You can
conditionally render a component using a ternary operator, an if statement, or
logical AND (&&).
What is the purpose of
the useEffect hook's return value?
A) To return a value to
the component
B) To perform cleanup
tasks
C) To handle errors
D) To define a fallback
value
Answer: B
Explanation: The return
value of the useEffect hook is used to perform cleanup tasks when the component
unmounts or before the effect runs again.
What will happen if you
call setState with a function that returns undefined?
A) It will throw an
error
B) It will not update the
state
C) It will reset the
state
D) It will update the
state to undefined
Answer: B
Explanation: Calling
setState with a function that returns undefined will not update the state.
Which of the following
is a valid way to create a controlled component in React?
A) Using value and
onChange props
B) Using defaultValue
prop
C) Using ref to access
the DOM element
D) None of the above
Answer: A
Explanation: A
controlled component is created by using the value and onChange props to manage
the input's state.
What is the purpose of
the useEffect hook's dependency array?
A) To specify when the
effect should run
B) To define the state
variables - C) To handle errors
D) To return a value
Answer: A
Explanation: The
dependency array in useEffect specifies when the effect should run based on the
values it contains.
What will happen if you
pass an object as a dependency to useEffect?
A) The effect will run
on every render
B) The effect will run
only once
C) The effect will run
when the object reference changes
D) The effect will
throw an error
Answer: C
Explanation: The effect
will run whenever the reference to the object changes, not when its properties
change.
Which of the following
is a valid way to handle form input in React?
A) Using uncontrolled
components
B) Using controlled
components
C) Both A and B
D) None of the above
Answer: C
Explanation: Both
controlled and uncontrolled components can be used to handle form input in
React.
What is the purpose of
the useCallback hook?
A) To memoize functions
and avoid unnecessary re-creations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useCallback hook is used to memoize functions, preventing them from being
recreated on every render.
What will happen if you
call setState with an object that has nested properties?
A) It will replace the
state
B) It will merge the
state
C) It will throw an
error
D) It will not update
the nested properties
Answer: D
Explanation: Calling
setState with an object that has nested properties will not update the nested
properties; it will only update the top-level properties.
Which of the following
is a valid way to handle asynchronous operations in React?
A) Using async/await
inside useEffect
B) Using Promises
C) Both A and B
D) None of the above
Answer: C
Explanation: Both
async/await and Promises can be used to handle asynchronous operations in
React.
What is the purpose of
the useTransition hook?
A) To manage state
B) To perform side
effects
C) To mark updates as
non-urgent
D) To handle context
Answer: C
Explanation: The
useTransition hook is used to mark updates as non-urgent, allowing React to
keep the interface responsive during large updates.
What will happen if you
call setState with a function that returns a Promise?
A) It will throw an
error
B) It will not update
the state
C) It will update the
state based on the resolved value
D) It will update the
state immediately
Answer: B
Explanation: Calling
setState with a function that returns a Promise will not update the state, as
setState expects a value or a function that returns a value.
Which of the following
is a valid way to handle multiple state updates in a single function?
A) Using setState
multiple times
B) Using a functional
update
C) Using useReducer
D) All of the above
Answer: D
Explanation: You can
handle multiple state updates using setState multiple times, a functional
update, or by using useReducer.
What is the purpose of
the useDeferredValue hook?
A) To manage state
B) To defer updates to
a value until the browser is idle
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useDeferredValue hook is used to defer updates to a value until the browser is
idle, improving performance during heavy updates.
What will happen if you
call setState with a value that is not the same type as the current state?
A) It will throw an
error
B) It will update the
state
C) It will not update
the state
D) It will reset the
state
Answer: B
Explanation: Calling
setState with a value of a different type will update the state to that new
value, regardless of type.
Which of the following
is a valid way to create a custom hook in React?
A) By using a function
that starts with "use"
B) By using a class
component
C) By using a regular function
D) None of the above
Answer: A
Explanation: Custom
hooks in React must be functions that start with "use" to follow the
convention and allow React to identify them as hooks.
What is the purpose of
the useDebugValue hook?
A) To manage state
B) To display a label
in React DevTools for custom hooks
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useDebugValue hook is used to display a label in React DevTools for custom
hooks, helping with debugging.
What will happen if you
call setState with a function that returns a Promise?
A) It will throw an
error
B) It will not update
the state
C) It will update the
state based on the resolved value
D) It will update the
state immediately
Answer: B
Explanation: Calling
setState with a function that returns a Promise will not update the state, as
setState expects a value or a function that returns a value.
Which of the following
is a valid way to handle form submissions in React?
A) Using onSubmit event
handler
B) Using onClick event
handler
C) Using onChange event
handler
D) Both A and B
Answer: D
Explanation: You can
handle form submissions using the onSubmit event handler for the form element,
and you can also use onClick for buttons within the form.
What is the purpose of
the useMemo hook?
A) To memoize values
and avoid unnecessary re-computations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useMemo hook is used to memoize values and avoid unnecessary re-computations
during renders.
What will happen if you
call setState with an object that has nested properties?
A) It will replace the
state
B) It will merge the
state
C) It will throw an
error
D) It will not update
the nested properties
Answer: D
Explanation: Calling
setState with an object that has nested properties will not update the nested
properties; it will only update the top-level properties.
Which of the following
is a valid way to conditionally render a component in React?
A) Using a ternary
operator
B) Using an if
statement
C) Using logical AND
(&&)
D) All of the above
Answer: D
Explanation: You can
conditionally render a component using a ternary operator, an if statement, or
logical AND (&&).
What is the purpose of
the useEffect hook's return value?
A) To return a value to
the component
B) To perform cleanup
tasks
C) To handle errors
D) To define a fallback
value
Answer: B
Explanation: The return
value of the useEffect hook is used to perform cleanup tasks when the component
unmounts or before the effect runs again.
What will happen if you
pass an object as a dependency to useEffect?
A) The effect will run
on every render
B) The effect will run
only once
C) The effect will run
when the object reference changes
D) The effect will
throw an error
Answer: C
Explanation: The effect
will run whenever the reference to the object changes, not when its properties
change.
Which of the following
is a valid way to handle form input in React?
A) Using uncontrolled
components - B) Using controlled components
C) Both A and B
D) None of the above
Answer: C
Explanation: Both
controlled and uncontrolled components can be used to handle form input in
React.
What is the purpose of
the useCallback hook?
A) To memoize functions
and avoid unnecessary re-creations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useCallback hook is used to memoize functions, preventing them from being
recreated on every render.
What will happen if you
call setState with a value that is not the same type as the current state?
A) It will throw an
error
B) It will update the
state
C) It will not update
the state
D) It will reset the
state
Answer: B
Explanation: Calling
setState with a value of a different type will update the state to that new
value, regardless of type.
Which of the following
is a valid way to create a custom hook in React?
A) By using a function
that starts with "use"
B) By using a class
component
C) By using a regular
function
D) None of the above
Answer: A
Explanation: Custom
hooks in React must be functions that start with "use" to follow the
convention and allow React to identify them as hooks.
What is the purpose of
the useDebugValue hook?
A) To manage state
B) To display a label
in React DevTools for custom hooks
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useDebugValue hook is used to display a label in React DevTools for custom
hooks, helping with debugging.
What will happen if you
call setState with a function that returns a Promise?
A) It will throw an
error
B) It will not update
the state
C) It will update the
state based on the resolved value
D) It will update the
state immediately
Answer: B
Explanation: Calling
setState with a function that returns a Promise will not update the state, as
setState expects a value or a function that returns a value.
Which of the following
is a valid way to handle form submissions in React?
A) Using onSubmit event
handler
B) Using onClick event
handler
C) Using onChange event
handler
D) Both A and B
Answer: D
Explanation: You can
handle form submissions using the onSubmit event handler for the form element,
and you can also use onClick for buttons within the form.
What is the purpose of
the useMemo hook?
A) To memoize values
and avoid unnecessary re-computations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useMemo hook is used to memoize values and avoid unnecessary re-computations
during renders.
What will happen if you
call setState with an object that has nested properties?
A) It will replace the
state
B) It will merge the
state
C) It will throw an
error
D) It will not update
the nested properties
Answer: D
Explanation: Calling
setState with an object that has nested properties will not update the nested
properties; it will only update the top-level properties.
Which of the following
is a valid way to conditionally render a component in React?
A) Using a ternary
operator
B) Using an if
statement
C) Using logical AND
(&&)
D) All of the above
Answer: D
Explanation: You can
conditionally render a component using a ternary operator, an if statement, or
logical AND (&&).
What is the purpose of
the useEffect hook's return value ?
A) To return a value to
the component
B) To perform cleanup
tasks
C) To handle errors
D) To define a fallback
value
Answer: B
Explanation: The return
value of the useEffect hook is used to perform cleanup tasks when the component
unmounts or before the effect runs again.
What will happen if you
pass an object as a dependency to useEffect?
A) The effect will run
on every render
B) The effect will run
only once
C) The effect will run
when the object reference changes
D) The effect will
throw an error
Answer: C
Explanation: The effect
will run whenever the reference to the object changes, not when its properties
change.
Which of the following
is a valid way to handle form input in React?
A) Using uncontrolled
components
B) Using controlled
components
C) Both A and B
D) None of the above
Answer: C
Explanation: Both
controlled and uncontrolled components can be used to handle form input in
React.
What is the purpose of
the useCallback hook?
A) To memoize functions
and avoid unnecessary re-creations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useCallback hook is used to memoize functions, preventing them from being
recreated on every render.
What will happen if you
call setState with a value that is not the same type as the current state?
A) It will throw an
error
B) It will update the
state
C) It will not update
the state
D) It will reset the
state
Answer: B
Explanation: Calling
setState with a value of a different type will update the state to that new
value, regardless of type.
Which of the following
is a valid way to create a custom hook in React?
A) By using a function
that starts with "use"
B) By using a class
component
C) By using a regular
function
D) None of the above
Answer: A
Explanation: Custom
hooks in React must be functions that start with "use" to follow the
convention and allow React to identify them as hooks.
What is the purpose of
the useDebugValue hook?
A) To manage state
B) To display a label
in React DevTools for custom hooks
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useDebugValue hook is used to display a label in React DevTools for custom
hooks, helping with debugging.
What will happen if you
call setState with a function that returns a Promise?
A) It will throw an
error
B) It will not update
the state
C) It will update the
state based on the resolved value
D) It will update the
state immediately
Answer: B
Explanation: Calling
setState with a function that returns a Promise will not update the state, as
setState expects a value or a function that returns a value.
Which of the following
is a valid way to handle form submissions in React?
A) Using onSubmit event
handler
B) Using onClick event
handler
C) Using onChange event
handler
D) Both A and B
Answer: D
Explanation: You can
handle form submissions using the onSubmit event handler for the form element,
and you can also use onClick for buttons within the form.
What is the purpose of
the useMemo hook?
A) To memoize values
and avoid unnecessary re-computations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useMemo hook is used to memoize values and avoid unnecessary re-computations
during renders.
What will happen if you
call setState with an object that has
nested properties?
A) It will replace the
state
B) It will merge the
state
C) It will throw an
error
D) It will not update
the nested properties
Answer: D
Explanation: Calling
setState with an object that has nested properties will not update the nested
properties; it will only update the top-level properties.
Which of the following
is a valid way to conditionally render a component in React?
A) Using a ternary operator
B) Using an if
statement
C) Using logical AND
(&&)
D) All of the above
Answer: D
Explanation: You can
conditionally render a component using a ternary operator, an if statement, or
logical AND (&&).
What is the purpose of
the useEffect hook's return value?
A) To return a value to
the component
B) To perform cleanup
tasks
C) To handle errors
D) To define a fallback
value
Answer: B
Explanation: The return
value of the useEffect hook is used to perform cleanup tasks when the component
unmounts or before the effect runs again.
What will happen if you
pass an object as a dependency to useEffect?
A) The effect will run
on every render
B) The effect will run
only once
C) The effect will run
when the object reference changes
D) The effect will
throw an error
Answer: C
Explanation: The effect
will run whenever the reference to the object changes, not when its properties
change.
Which of the following
is a valid way to handle form input in React?
A) Using uncontrolled
components
B) Using controlled
components
C) Both A and B
D) None of the above
Answer: C
Explanation: Both
controlled and uncontrolled components can be used to handle form input in
React.
What is the purpose of
the useCallback hook?
A) To memoize functions
and avoid unnecessary re-creations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useCallback hook is used to memoize functions, preventing them from being
recreated on every render.
What will happen if you
call setState with a value that is not the same type as the current state?
A) It will throw an
error
B) It will update the
state
C) It will not update
the state
D) It will reset the
state
Answer: B
Explanation: Calling
setState with a value of a different type will update the state to that new
value, regardless of type.
Which of the following
is a valid way to create a custom hook in React?
A) By using a function
that starts with "use"
B) By using a class
component
C) By using a regular
function
D) None of the above
Answer: A
Explanation: Custom
hooks in React must be functions that start with "use" to follow the
convention and allow React to identify them as hooks.
What is the purpose of
the useDebugValue hook?
A) To manage state
B) To display a label
in React DevTools for custom hooks
C) To perform side
effects
D) To handle context
Answer: B
Explanation: The
useDebugValue hook is used to display a label in React DevTools for custom
hooks, helping with debugging.
What will happen if you
call setState with a function that returns a Promise?
A) It will throw an
error
B) It will not update
the state
C) It will update the
state based on the resolved value
D) It will update the
state immediately
Answer: B
Explanation: Calling
setState with a function that returns a Promise will not update the state, as
setState expects a value or a function that returns a value.
Which of the following
is a valid way to handle form submissions in React?
A) Using onSubmit event
handler
B) Using onClick event
handler
C) Using onChange event
handler
D) Both A and B
Answer: D
Explanation: You can
handle form submissions using the onSubmit event handler for the form element,
and you can also use onClick for buttons within the form.
What is the purpose of
the useMemo hook?
A) To memoize values
and avoid unnecessary re-computations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useMemo hook is used to memoize values and avoid unnecessary re-computations
during renders.
What will happen if you
call setState with an object that has nested properties?
A) It will replace the
state
B) It will merge the
state
C) It will throw an
error
D) It will not update
the nested properties
Answer: D
Explanation: Calling
setState with an object that has nested properties will not update the nested
properties; it will only update the top-level properties.
Which of the following
is a valid way to conditionally render a component in React?
A) Using a ternary operator
B) Using an if
statement
C) Using logical AND
(&&)
D) All of the above
Answer: D
Explanation: You can
conditionally render a component using a ternary operator, an if statement, or
logical AND (&&).
What is the purpose of
the useEffect hook's return value?
A) To return a value to
the component
B) To perform cleanup
tasks
C) To handle errors
D) To define a fallback
value
Answer: B
Explanation: The return
value of the useEffect hook is used to perform cleanup tasks when the component
unmounts or before the effect runs again.
What will happen if you
pass an object as a dependency to useEffect?
A) The effect will run
on every render
B) The effect will run
only once
C) The effect will run
when the object reference changes
D) The effect will
throw an error
Answer: C
Explanation: The effect
will run whenever the reference to the object changes, not when its properties
change.
Which of the following
is a valid way to handle form input in React?
A) Using uncontrolled
components
B) Using controlled
components
C) Both A and B
D) None of the above
Answer: C
Explanation: Both
controlled and uncontrolled components can be used to handle form input in
React.
What is the purpose of
the useCallback hook?
A) To memoize functions
and avoid unnecessary re-creations
B) To manage state
C) To perform side
effects
D) To handle context
Answer: A
Explanation: The
useCallback hook is used to memoize functions, preventing them from being
recreated on every render.
What will happen if you
call setState with a value that is not the same type as the current state?
A) It will throw an
error
B) It will update the
state
C) It will not update
the state
D) It will reset the
state
Answer: B
Explanation: Calling
setState with a value of a different type will update the state to that new
value, regardless of type.
Which of the following
is a valid way to create a custom hook in React?
A) By using a function
that starts with "use"
B) By using a class
component
C) By using a regular
function
D) None of the above
Answer: A
Explanation: Custom
hooks in React must be functions that start with "use" to follow the
convention and allow React to identify them as hooks.