curriculum/challenges/english/blocks/quiz-react-forms-data-fetching-and-routing/66f1ad049d7a6ac0886cc2ba.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
Which of the following is an example of a controlled input?
<input id="name" type="text" />
<input id="name" onChange={handleChange} type="text" />
<input value="" id="name" type="text" />
<input value={name} id="name" onChange={handleChange} type="text" />
Which of the following is an example of an uncontrolled input?
<input type="text" references={nameRef} id="name" />
<input type="text" refs={nameRef} id="name" />
<input type="text" reference={nameRef} id="name" />
<input type="text" ref={nameRef} id="name" />
Which of the following is NOT a commonly used way to fetch data in React?
SWR
Axios
Fetch API
Redux
Which of the following hooks is commonly associated with fetching data in React?
useParams
useContext
useReducer
useEffect
What is memoization?
A common algorithm used to find the shortest path between two vertices in a graph.
A special technique used to optimize the performance for all controlled and uncontrolled inputs.
A divide and conquer algorithm used to recursively sort sub arrays and merge them together.
An optimization technique in which the result of expensive function calls are cached (remembered) based on specific arguments.
Which of the following hooks is used to memoize computed values?
useParams
useEffect
useState
useMemo
Which of the following uses the correct hook to memoize function references?
useContext(() => {
// code goes here
}, [dependency]);
useParams(() => {
// code goes here
}, [dependency]);
useState(() => {
// code goes here
}, [dependency]);
useCallback(() => {
// code goes here
}, [dependency]);
What is a dependency?
A dependency is a commonly used testing library used in React applications.
A dependency is a type of React component that only runs on the server.
A dependency is a special compiler used in React applications to compile the React code into JavaScript.
A dependency is where one component or module in an application relies on another to function properly.
What is a package manager?
A tool used to update third-party packages installed in applications.
A tool used to manage packages solely created within a project.
A tool used to move dependencies out of the node_modules folder and into a special config folder.
A tool used for installation, updates and removal of dependencies.
Which of the following is NOT a commonly used package manager in the JavaScript ecosystem?
pnpm
Yarn
npm
Jest
Which of the following is a key configuration file that contains metadata about your project?
config.json
lint.json
node_modules.json
package.json
Which of the following is a commonly used React framework?
Django
Webpack
Gulp
Remix
Which of the following is the correct way to add routes to your React application using React Router?
<StrictMode>
<AddRouter>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</AddRouter>
</StrictMode>
<StrictMode>
<ContextRouter>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</ContextRouter>
</StrictMode>
<StrictMode>
<SetRoute>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</SetRoute>
</StrictMode>
<StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</BrowserRouter>
</StrictMode>
Which of the following is the correct way to create a dynamic route in React Router?
<Route path="?category" element={<Category />} />
<Route path="<category" element={<Category />} />
<Route path="/category" element={<Category />} />
<Route path=":category" element={<Category />} />
Which of the following hooks is used to access the dynamic parameters from a URL path?
useParameterized
usePar
useParameters
useParams
Which of the following is the correct way to create a custom request handler in Next.js?
export async function SERVE() {
const res = await fetch("https://example-api.com");
const data = await res.json();
return Response.json({ data });
}
export async function FETCH() {
const res = await fetch("https://example-api.com");
const data = await res.json();
return Response.json({ data });
}
export async function SET() {
const res = await fetch("https://example-api.com");
const data = await res.json();
return Response.json({ data });
}
export async function GET() {
const res = await fetch("https://example-api.com");
const data = await res.json();
return Response.json({ data });
}
What is prop drilling?
The process of creating a reducer that specifies how state should change in response to particular props used.
The process of passing props from child component up to the parent component.
The process of creating a context provider for a React application and using that to send props from parent to child components.
The process of passing props from a parent component to deeply nested child components, even when some of the child components don't need the props.
Which of the following is NOT a commonly used state management solution for React applications?
Context API
Zustand
Redux
Spring
What are the React Developer Tools used for?
These tools are used to only check for accessibility issues in React applications.
These tools are used to add additional tests for React components.
These tools are used to memoize all React components inside the application.
These tools are used to inspect React components and identify performance issues.
What are React Server Components?
These are components that manage context exclusively on the server.
These are memoized components that render exclusively on the server.
These are components that manage state exclusively on the server.
These are components that render exclusively on the server.