React Expert

1 / 50

What is the difference between Element and Component?

Select the correct answer

1

An Element is a plain object describing what you want to appear in the DOM, while a Component can be a class or function that returns an element.

2

An Element in React is used for styling, while a Component is used for rendering.

3

An Element in React is a class, while a Component is a function.

4

An Element in React is a function that returns HTML, while a Component is a plain object describing what you want to appear in the DOM.

What is Incremental Static Regeneration (ISR) in React?

Select the correct answer

1

Incremental Static Regeneration (ISR) in React allows you to update static content after the site is built.

2

Incremental Static Regeneration (ISR) in React is a way to fetch data from an API.

3

Incremental Static Regeneration (ISR) in React is used for rendering content in the browser.

4

Incremental Static Regeneration (ISR) in React is a technique for managing state.

Exlplain hydration in React.

Select the correct answer

1

Hydration in React is the process of defining component styles.

2

Hydration in React is the process of fetching data from an API.

3

Hydration in React is the process of rendering components on the server.

4

Hydration in React is the process of attaching event listeners to a server-rendered markup.

What is Static Site Generation (SSG) in React?

Select the correct answer

1

Static Site Generation (SSG) in React means generating HTML at build time.

2

Static Site Generation (SSG) in React means generating HTML at runtime.

3

Static Site Generation (SSG) in React is a technique for managing state.

4

Static Site Generation (SSG) in React is a way to fetch data from an API.

What is Server-Side Rendering (SSR) in React?

Select the correct answer

1

Server-Side Rendering (SSR) in React means rendering the content in the browser.

2

Server-Side Rendering (SSR) in React is a way to fetch data from an API.

3

Server-Side Rendering (SSR) in React means rendering the content on the server and sending HTML to the client.

4

Server-Side Rendering (SSR) in React is a technique for managing state.

What is Client-Side Rendering (CSR) in React?

Select the correct answer

1

Client-Side Rendering (CSR) in React means rendering the content in the browser using JavaScript.

2

Client-Side Rendering (CSR) in React means rendering the content on the server.

3

Client-Side Rendering (CSR) in React is a technique for managing state.

4

Client-Side Rendering (CSR) in React is a way to fetch data from an API.

What is React.memo, and how can it be used to optimize functional components?

Select the correct answer

1

React.memo is a higher order component used to optimize functional components by preventing unnecessary re-renders.

2

React.memo is used to fetch data from an API.

3

React.memo is a method for managing component state.

4

React.memo is used to define component styles.

What is a Higher-Order Component (HOC) in React?

Select the correct answer

1

A Higher-Order Component (HOC) in React is a way to manage component state.

2

A Higher-Order Component (HOC) in React is a method for fetching data.

3

A Higher-Order Component (HOC) in React is a technique for styling components.

4

A Higher-Order Component (HOC) in React is a function that takes a component and returns a new component.

What is a React error boundary, and how can it be useful for handling errors in components?

Select the correct answer

1

A React error boundary is a component that catches JavaScript errors anywhere in their child component tree.

2

A React error boundary is a method for managing component state.

3

A React error boundary is used to fetch data from an API.

4

A React error boundary is a way to define component styles.

Why is it important to maintain immutability when updating state in React?

Select the correct answer

1

Maintaining immutability when updating state in React is important because it simplifies HTML markup.

2

Maintaining immutability when updating state in React is important because it helps ensure predictable state changes and simplifies debugging.

3

Maintaining immutability when updating state in React is important because it allows direct manipulation of DOM elements.

4

Maintaining immutability when updating state in React is important because it enhances CSS performance.

Why can hooks not be conditional in React?

Select the correct answer

1

Hooks cannot be conditional in React because they cannot access props.

2

Hooks cannot be conditional in React because they cannot handle asynchronous code.

3

Hooks cannot be conditional in React because they cannot be used inside loops.

4

Hooks cannot be conditional in React because they rely on a consistent order of execution.

What is the difference between controlled vs. uncontrolled components in React?

Select the correct answer

1

Controlled components in React are used for handling side effects.

2

Controlled components in React have their state controlled by React, while uncontrolled components have their state controlled by the DOM.

3

Controlled components in React can only be used in class components.

4

Uncontrolled components in React are used for managing global state.

What is a pure function in React?

Select the correct answer

1

A pure function in React is a function that fetches data.

2

A pure function in React is a function that returns the same output for the same input without side effects.

3

A pure function in React is a function that makes API calls.

4

A pure function in React is a function that can mutate state directly.

What are forward refs?

Select the correct answer

1

Forward refs in React are used to handle side effects.

2

Forward refs in React are used to fetch data from an API.

3

Forward refs in React are used to manage component state.

4

Forward refs in React are used to pass refs to child components.

What are the two primary ways of creating components in React?

Select the correct answer

1

The two primary ways of creating components in React are state components and stateless components.

2

The two primary ways of creating components in React are CSS components and HTML components.

3

The two primary ways of creating components in React are server components and client components.

4

The two primary ways of creating components in React are functional components and class components.

What are the purpose of keys in React lists?

Select the correct answer

1

Keys in React lists help identify which items have changed, are added, or removed.

2

Keys in React lists are used to create event handlers for the list items.

3

Keys in React lists are used to style the list items.

4

Keys in React lists are used to fetch data for the list items.

Can web browsers read JSX directly?

Select the correct answer

1

No, web browsers cannot read JSX directly; it needs to be transpiled to JavaScript.

2

Yes, web browsers can read JSX directly without any transpilation.

3

Only some web browsers can read JSX directly.

4

Web browsers can read JSX if it is included in a script tag.

What does reconciliation mean in React?

Select the correct answer

1

Reconciliation in React is the process of fetching data from APIs.

2

Reconciliation in React is the process of defining component styles.

3

Reconciliation in React is the process of updating the DOM to match the virtual DOM.

4

Reconciliation in React is the process of managing component states.

What are React Fragments?

Select the correct answer

1

React Fragments let you group multiple elements without adding extra nodes to the DOM.

2

React Fragments are a method for managing state in React.

3

React Fragments are used to define CSS styles in React.

4

React Fragments are a way to handle side effects in React.

What is the virtual DOM?

Select the correct answer

1

The virtual DOM is a database for storing component states.

2

The virtual DOM is a lightweight copy of the actual DOM that React uses to optimize updates.

3

The virtual DOM is a CSS framework for styling components.

4

The virtual DOM is a tool for managing API requests.

What is NextJS and major features of it?

Select the correct answer

1

NextJS is a React framework for server-side rendering and static site generation.

2

NextJS is a CSS framework for styling React applications.

3

NextJS is a testing library for React applications.

4

NextJS is a database management system for React applications.

What are lifecycle methods?

Select the correct answer

1

Lifecycle methods are used to fetch data in React components.

2

Lifecycle methods are special methods in React components that are called at different stages of a component's life.

3

Lifecycle methods are used to style React components.

4

Lifecycle methods are used to define routes in React components.

What does unmounted mean in React?

Select the correct answer

1

Unmounted in React means the component is initialized but not rendered.

2

Unmounted in React means the component is ready to receive props.

3

Unmounted in React means the component has been rendered to the DOM.

4

Unmounted in React means the component has been removed from the DOM.

What does mounted mean in React?

Select the correct answer

1

Mounted in React means the component is ready to receive props.

2

Mounted in React means the component has been removed from the DOM.

3

Mounted in React means the component has been rendered to the DOM.

4

Mounted in React means the component is initialized but not rendered.

What does lifting state up mean in React?

Select the correct answer

1

Lifting state up means moving state to a common ancestor component.

2

Lifting state up means moving state to a child component.

3

Lifting state up means moving state to a sibling component.

4

Lifting state up means moving state to the global scope.

Name tools that can be used to test React apps?

Select the correct answer

1

Tools like Redux and MobX can be used to test React apps.

2

Tools like Webpack and Babel can be used to test React apps.

3

Tools like MongoDB and PostgreSQL can be used to test React apps.

4

Tools like Jest, Enzyme, and React Testing Library can be used to test React apps.

What are synthetic events in React?

Select the correct answer

1

Synthetic events in React are a method for fetching data.

2

Synthetic events in React are cross-browser wrappers around native events.

3

Synthetic events in React are a way to define CSS styles.

4

Synthetic events in React are a way to manage component state.

How do you create an event in React?

Select the correct answer

1

You create an event in React by using the useState hook.

2

You create an event in React by defining an event handler function and attaching it to an element.

3

You create an event in React by defining CSS styles.

4

You create an event in React by writing HTML templates.

What is an event in React?

Select the correct answer

1

An event in React is a method for managing state.

2

An event in React is a component lifecycle method.

3

An event in React is an object that represents a user action.

4

An event in React is a way to define component styles.

What is React Router?

Select the correct answer

1

React Router is a library for styling React components.

2

React Router is a library for managing state in React.

3

React Router is a library for handling side effects in React.

4

React Router is a library for routing in React applications.

How can you implement routing in a React application?

Select the correct answer

1

You can implement routing in React using HTML templates.

2

You can implement routing in React using CSS styles.

3

You can implement routing in React using the useState hook.

4

You can implement routing in React using React Router.

How is React different to React Native?

Select the correct answer

1

React is for web applications, while React Native is for mobile applications.

2

React Native is used for server-side rendering.

3

React is for mobile applications, while React Native is for web applications.

4

React Native is a tool for creating CSS stylesheets.

Give an example of how to use the useRef hook.

Select the correct answer

1

The useRef hook is a way to handle side effects.

2

The useRef hook is used for routing in React applications.

3

The useRef hook can be used to access a DOM element directly.

4

The useRef hook is used for state management.

Explain the useRef hook.

Select the correct answer

1

The useRef hook is a way to handle side effects.

2

The useRef hook returns a mutable ref object.

3

The useRef hook is used for data fetching.

4

The useRef hook is used to manage component state.

Explain the useReducer hook.

Select the correct answer

1

The useReducer hook is used for routing in React applications.

2

The useReducer hook is a way to handle side effects.

3

The useReducer hook is used for fetching data.

4

The useReducer hook is used for managing complex state logic.

Explain the useCallback hook.

Select the correct answer

1

The useCallback hook returns a memoized callback.

2

The useCallback hook is used for component rendering.

3

The useCallback hook is used for handling side effects.

4

The useCallback hook is a way to manage props changes.

Explain the useMemo hook.

Select the correct answer

1

The useMemo hook is used to fetch data from an API.

2

The useMemo hook is a way to handle state changes.

3

The useMemo hook is used for side effects in React.

4

The useMemo hook returns a memoized value.

Explain the useContext hook.

Select the correct answer

1

The useContext hook is a method for fetching data.

2

The useContext hook is a way to handle side effects in React.

3

The useContext hook is used for managing component state.

4

The useContext hook allows you to subscribe to React context changes.

What are the differences between useEffect and useLayoutEffect hooks?

Select the correct answer

1

The useEffect hook is used for asynchronous operations, while the useLayoutEffect hook is for synchronous ones.

2

The useEffect hook runs after every render, while the useLayoutEffect hook runs synchronously after all DOM mutations.

3

The useEffect hook is used for data fetching, while the useLayoutEffect hook is for event handling.

4

The useEffect hook manages props changes, while the useLayoutEffect hook manages state changes.

Explain the useEffect hook.

Select the correct answer

1

The useEffect hook is used to manage component styles.

2

The useEffect hook allows you to perform side effects in functional components.

3

The useEffect hook is a method for managing event handlers.

4

The useEffect hook is a way to create new elements in React.

Explain the useState hook.

Select the correct answer

1

The useState hook is used to create context in React.

2

The useState hook allows you to add state to functional components.

3

The useState hook is a way to handle side effects in React.

4

The useState hook is a method for fetching data in React.

What are hooks?

Select the correct answer

1

Hooks are functions that let you use state and lifecycle features in functional components.

2

Hooks are methods used for routing in React applications.

3

Hooks are a way to manage CSS styles in React.

4

Hooks are functions that handle HTTP requests in React.

What is the children prop?

Select the correct answer

1

The children prop is a method for managing component state.

2

The children prop is used to handle events in React components.

3

The children prop is used to define default values for inputs.

4

The children prop allows components to pass nested elements.

What are props?

Select the correct answer

1

Props are events that can be triggered in React components.

2

Props are methods used to fetch data in React.

3

Props are inputs to a React component.

4

Props are the local state of React components.

What is JSX?

Select the correct answer

1

JSX is a module bundler for React applications.

2

JSX is a format for writing CSS styles in React.

3

JSX is a type of database used by React applications.

4

JSX is a syntax extension for JavaScript used in React.

What are components in React?

Select the correct answer

1

Components are special HTML elements used in React.

2

Components are functions that run on the server in React.

3

Components are external libraries integrated into React applications.

4

Components are reusable building blocks in a React application.

What is React?

Select the correct answer

1

React is a tool for managing databases in JavaScript.

2

React is a JavaScript framework for building mobile applications.

3

React is a styling library for creating CSS stylesheets.

4

React is a JavaScript library for building user interfaces.

How to facilitate real-time communication in React applications?

Select the correct answer

1

To facilitate real-time communication in React applications, you can use the useState hook.

2

To facilitate real-time communication in React applications, you can use CSS animations.

3

To facilitate real-time communication in React applications, you can use WebSockets or libraries like Socket.io.

4

To facilitate real-time communication in React applications, you can use HTML5 forms.

How to loop inside JSX?

Select the correct answer

1

You can loop inside JSX using CSS styles.

2

You can loop inside JSX using HTML templates.

3

You can loop inside JSX using the useState hook.

4

You can loop inside JSX using the map() function.

How can you make API requests in a React application?

Select the correct answer

1

You can make API requests in React using HTML templates.

2

You can make API requests in React using the fetch function or Axios.

3

You can make API requests in React using the useState hook.

4

You can make API requests in React using CSS styles.