Component & Props Next.js Quiz

Last Updated :

Discuss

Comments

Question 1

When passing a function as a prop from a parent to a child component, what is a common mistake that can lead to unexpected re-renders of the child component?

A
Not using the 'useCallback' hook on the passed function.
B
Forgetting to destructure the function prop in the child component.
C
Using an arrow function directly in the child component's 'onClick' handler.
D
Passing the function without binding 'this' in a class component.

Question 2

What is the purpose of a '_app.js' file in a Next.js project?

A
To initialize pages and wrap them with a custom App component, allowing for shared layouts and state.
B
To configure the Next.js server, such as setting up middleware.
C
To define API routes for the application.
D
To define global CSS styles that apply to all pages.

Question 3

When creating a layout component in Next.js, what is the standard way to render the content of the page that is using the layout?

A
By using a custom hook to fetch and render the page content within the layout component
B
By using the 'children' prop within the layout component
C
By using a 'dangerouslySetInnerHTML' prop to inject the page content
D
By passing the page content as a 'content' prop to the layout component

Question 4

In Next.js, when would you use 'getStaticPaths' in conjunction with 'getStaticProps'?

A
To create a serverless function that can be deployed to a CDN
B
To fetch data from an external API at build time for a single static page
C
To enable client-side rendering for a specific page
D
To pre-render a dynamic page with data that depends on the path

Question 5

What is the purpose of the 'key' prop when rendering a list of elements in React?

A
To provide a unique identifier for each element, which helps React to efficiently update the UI.
B
To create a reference to each element, which can be used to access the element's DOM node.
C
To add a CSS class to each element in the list.
D
To specify the order in which the elements should be rendered.

Question 6

When using CSS Modules in a Next.js application, how are the class names generated in the final HTML?

A
The class names are the same as in the CSS file, but with a unique prefix.
B
The class names are a unique hash, which is generated at build time.
C
The class names are a combination of the file name and the original class name.
D
The class names are not generated, they are the same as in the CSS file.

Question 7

In Next.js, what does the 'fallback' property in the object returned by 'getStaticPaths' do?

A
If 'fallback' is set to 'false', then any paths not returned by 'getStaticPaths' will result in a 404 page.
B
If 'fallback' is set to 'true', then paths not returned by 'getStaticPaths' will be server-side rendered on the first request.
C
If 'fallback' is set to 'blocking', then the browser will show a loading spinner while the page is being generated.
D
The 'fallback' property is used to specify a custom 404 page for dynamic routes.

Question 8

What is the main advantage of using CSS-in-JS libraries like styled-components or Emotion over traditional CSS with CSS Modules in a Next.js application?

A
CSS-in-JS is the only way to create responsive designs in a Next.js application.
B
CSS-in-JS is the only way to scope styles to a specific component in a Next.js application.
C
CSS-in-JS is faster than traditional CSS because it is compiled at build time.
D
CSS-in-JS allows you to write CSS with JavaScript, which can be more powerful and flexible than traditional CSS.

Question 9

When passing props to a child component, what is the difference between 'props.children' and passing a render prop?

A
There is no difference, they are two different ways of achieving the same thing.
B
'props.children' is a more declarative way of passing JSX, while a render prop is a more imperative way.
C
'props.children' is used to pass a single JSX element, while a render prop can be used to pass multiple JSX elements.
D
'props.children' can only be used with class components, while a render prop can be used with both class and functional components.

Question 10

What is the purpose of the 'dangerouslySetInnerHTML' prop in React?

A
To set the inner HTML of a component to a string, which is a more performant way of updating the DOM than using JSX.
B
To render raw HTML in a component, which can be useful for integrating with third-party libraries or for rendering user-generated content.
C
To add a CSS class to a component that is not rendered by React.
D
To create a component that is not controlled by React, which can be useful for integrating with legacy code.

Tags:

Next.js

There are 10 questions to complete.

Take a part in the ongoing discussion