Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Interview Prep > React > Flashcards

React Flashcards

1
Q

What is React?

A

React is a popular JavaScript library used for frontend development created by Facebook in 2013.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

In calling setState, when would you pick one method of calling this function over the other?

A

There are 2 common ways to call setState
Object Form which will overwrite the previous state
Functional Form which will use a callback function also known as an updater function, this receive the most recent version of that state and return an updated version.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Is setState synchronous or async call?

A

setState is an async call, uses reconciliation and batches multiple setState calls for performance optimizations.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are different ways that you can call setState?

A

In early versions of React there was a set lifecycle methods that developers could use to call setState, you would use these in Class Components
constructor()
render()
componentDidMount()
componentDidUpdate()
componentWillUnmount()
In newer versions of React developers can now use hooks allowing users to use useEffect and useLayoutEffect to achieve a similar functionality in Functional Components.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

List some major advantages of React

A

Component-Based Architecture
One-way Data Flow
Virtual DOM
Large and active community
Developer Tools
Backed by Facebook/Meta
Declarative Syntax

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are some limitations of React?

A

Complexity
Learning Curve
Initial Load Time
Performance Impact with large application
Lack of Official Guidelines
Breaking Changes when updated sometimes
Its not a framework its a library

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is JSX?

A

JSX or JavaScript XML is syntax extension of JavaScript that is used in react to allow developers to write HTML in JavaScript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the virtual DOM? Explain how it works with ReactJS

A

The virtual DOM is a lightweight copy of the real DOM. It works by comparing the previous virtual DOM with the updated version and only making the necessary changes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Why can’t browsers read JSX?

A

JSX isn’t valid JavaScript and needs to changed into JavaScript using a transpiler.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How different is React’s ES6 syntax when compared to ES5?

A

Class Syntax / functional components
Default Parameters
Arrow Functions
Spread Operator
Let and Const Declaration
Destructuring Assignment / digging into state or prop
Template Literals / backticks
Import and Export Statements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the differentiate between Real DOM and Virtual DOM?

A

The Real Dom is the actual representation of the HTML structure on the web browser. The Virtual DOM is an abstraction of the Real DOM, changes will be rendered here first and compared to the old virtual DOM then old the changes will render, making it more efficient?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What do you understand from “In React, everything is a component.”?

A

Components are the building blocks of React. Allowing developers to break the UI down into smaller pieces. This is great for performance and reusability.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Explain the purpose of Render() in React.

A

Render() is the lifecycle method used in class components that defines the components UI. In functional components the the render() method is the body itself that returns the JSX expression.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

How can you embed two or more components into one?

A

You can call a component inside of another component also called nesting.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Define “props” in the context of React.

A

Props is short for properties, props are used to pass data from a parent component to a child component. This data is read only

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is a state in React and how is it used?

A

An object that represents the internal data of a component allows a component to store and manage data dynamically. It is used to influence the rendering of components to build an interactive and dynamic UI

17
Q

How can you update the state of a component?

A

Call the setState method, this can be used in a class component but will rewrite the state in the desired syntax, or in a functional form which will update the previous state

18
Q

What is an arrow function in React? How is it used?

A

A more concise way to define function, making the code more readable. It is used to make cleaner and more condensed code.

19
Q

Differentiate between stateful and stateless components. Stateful vs Stateless Components React.

A

Stateful components can be dynamic and can manage their own state and handle complex logic. while stateless components are pure components and handle simple logic that rely on props.

20
Q

What are the different phases of React component’s lifecycle?

A

The three phases are Mounting, Updating, and Unmounting

21
Q

Explain the lifescycle methods of React components in detail

A

Mounting puts elements into the dom. A component is updated when there is a change in state or props. Unmounting is removing a component from the dom.

22
Q

What is an event in React?

A

An object that represents a specific action or interaction triggered by the user or the system.

23
Q

How do you create an event handler in React?

A

In React, you can create an event handler by defining a function and attaching it to an event in JSX.

24
Q

What are synthetic events in React?

A

In React, synthetic events are a cross-browser wrapper around the browser’s native events.

25
Q

What is a ref in react?

A

An attribute that helps store a reference to a particular react element or component.

26
Q

List some of the cases when you should use Refs

A

Managing Focus
Accessing Form Values
Integrating with Third-Party Libraries
Triggering Animations
Measuring DOM Elements

27
Q

How do you modularize code in React?

A

In React, modularizing code involves breaking your application into smaller, reusable components.

28
Q

How are forms created in React?

A

By using the form element and form input components to manage state(onChange) and form submission (onSubmit).

29
Q

What do you know about controlled and uncontrolled components?

A

Controlled components are handled by React state while uncontrolled components are handled by the DOM itself.

30
Q

What is a Higher Order Component(HOC)?

A

A base component that can reused with additional features. Takes a component as input and returns a new enhanced component with additional functionality.

31
Q

What can you do with HOC?

A

Allows developers to break the code apart at the most fundamental level and reuse that code while adding new functionality to it.

32
Q

What is the significance of keys in React?

A

Special attributes used to identify and track individual items in a list or set of rendered components

33
Q

What is React Router?

A

A popular library in the React that provides routing capabilities by updating the URL without causing a full page reload. Allowing different components to render based of the updated URL.

34
Q

Why is Switch component used in React Router v4?

A

This component is used to ensure that only the first matching Route is rendered, usually within a list of routes.

35
Q

Why do we need Router in React?

A

It enables the navigation and rendering of different components based on the current URL or route. Allowing developers to build Single-Page Applications (SAPs)

36
Q

List the advantages of ReactRouter

A

Declarative Routing
Dynamic Routing
Nested Routing
URL Manipulation and History Management
Route Matching and Switching
Route Parameters and Query Parameters
Route Guards and Redirects
Community Support and Active Development
Seamless integration with other React libraries and tools.

37
Q

How is React Router different from conventional routing?

A

Single-Page Application (SPA) Approach
Client-Side Routing
Component-Based Routing
Dynamic Routing
History Management
Virtual Rendering

Interview Prep (6 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions