React Flashcards

1
Q

Can different versions of the same package be used in the same application?

A

Yes, but it is not recommended because different versions may have different dependencies that conflict with one another and cause runtime errors.

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

Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM

A

The Real DOM represents the actual structure of the HTML document and directly interacts with the browser’s rendering engine, while the Virtual DOM is an in-memory representation of the Real DOM, used by frameworks like React to optimize updates by comparing and selectively updating only changed parts of the Real DOM.

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

Differentiate between stateful and stateless components.

A

Stateful components, also known as class components in React, maintain and manage their own state data, while stateless components, also known as functional components, do not have their own state and rely solely on props passed to them for rendering.

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

Explain the lifecycle methods of React components in detail.

A

The lifecycle methods of React components represent different stages in the lifecycle of a component, from creation to destruction, and provide opportunities to perform actions at specific points. They include:

Mounting Phase:

  • constructor(): Called when a component is initialized, used for initializing state and binding event handlers.
  • render(): Renders the component’s UI, returning the JSX markup.
  • componentDidMount(): Called after the component is rendered for the first time, used for performing initialization that requires DOM nodes, such as making API calls or setting up subscriptions.

Updating Phase:

  • shouldComponentUpdate(): Called before rendering when new props or state are received, used to optimize performance by determining if the component needs to re-render.
  • render(): Re-renders the component’s UI if shouldComponentUpdate() returns true.
  • componentDidUpdate(): Called after the component is updated, used for performing side effects such as fetching new data based on props changes.

Unmounting Phase:

  • componentWillUnmount(): Called before a component is removed from the DOM, used for cleanup tasks such as unsubscribing from events or canceling asynchronous tasks.

Error Handling:

componentDidCatch(): Called when an error occurs during rendering, in lifecycle methods of child components, or in event handlers, used for handling and gracefully recovering from errors within the component tree.

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

Explain the purpose of render() in React.

A

The render() method in React is responsible for returning the JSX markup that defines the component’s UI, determining what should be displayed based on the current state and props of the component.

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

How are forms created in React?

A

Forms in React are created using the <form> element along with input elements like <input></input>, <textarea>, and <select>, typically managed using component state or controlled components to handle user input and updates.</select></textarea>

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

How can you embed two or more components into one?

A

You can embed two or more components into one by simply rendering them together within the JSX markup of a parent component, enclosing them within a single parent element.

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

How can you update the state of a component?

A

By utilizing the updater function provided with the useState hook.

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

How come when you declare a variable in any js or jsx file outside of any class, object, or function, it’s not really global to all other files, components?

A

Variables must be imported and exported to be able to be used in other components.

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

Arrow functions that automatically capture ‘this’ value, let (mutable) and const (immutable), improved readability with template literals to concatenate strings `${firstName}, destructuring, and import/export statements

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

How do you create an event handler in React?

A

Define a function that will be executed when a specific event occurs, such as a button click, input change, or form submission. They are typically assigned to JSX elements as props, and they are responsible for updating the component’s state or triggering other actions.

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

How do you modularize code in React?

A

Break down your application into smaller, reusable components, each encapsulating a specific piece of functionality, then organizing them into separate files and directories, so they can be imported and exported as needed using ES6 module syntax.

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

In package.json, how can you ensure that only patch version updates are accepted when npm install is run? (i.e. upgrading from 2.3.0 to 2.3.1 is okay, but not 2.4.0 or greater)

A

Use the ~ (tilde) operator at the start of the version: “dependencies”: {
“your-package”: “~2.3.0”
}

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

Is setState a synchronous or async call?

A

It is asynchronous. State is updated in batches, so it continues to run instead of waiting for a function to complete before moving on.

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

List down the advantages of React Router.

A

The advantages of React Router include:

Declarative Routing: Allows for defining routes in a declarative manner using JSX, enhancing readability and maintainability.
Nested Routing: Supports nested routes, enabling hierarchical navigation structures and encapsulation of route configurations within components.
Dynamic Routing: Supports dynamic route matching and parameter extraction, facilitating the creation of dynamic and data-driven routes.
URL Manipulation: Provides programmatic access to the browser’s URL, enabling navigation and URL manipulation from within components.
History Management: Integrates with browser history API, allowing for history management, navigation control, and deep linking within single-page applications.
Server-side Rendering: Supports server-side rendering, enabling search engine optimization (SEO) and improved performance for initial page loads.
Community and Documentation: React Router is well-supported by the community with extensive documentation, tutorials, and examples available, making it easy to learn and use.
Extendibility: Offers a flexible and extendable API with hooks and higher-order components, allowing for customizations and integration with other libraries and frameworks.

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

What is a ref in React?

A

A ref is way of accessing and interacting with a DOM element or to allow values to change without triggering a re-render.

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

List some of the cases when you should use Refs.

A

Accessing and modifying DOM elements., persisting values between renders, Holding mutable values without triggering re-renders.

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

What are the features of React?

A

React’s most significant features include its component-based architecture for building reusable UI elements, virtual DOM for efficient rendering, JSX for combining HTML-like syntax with JavaScript, and one-way data binding for predictable data flow.

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

List some of the major advantages of React?

A

Reusable Components, Virtual DOM, JSX, one-way data binding, performance optimization (using virtual DOM and momoization)

20
Q

What are Pure Components?

A

Pure components in React are class components that extend React.PureComponent or functional components created using React.memo(). They perform shallow comparison of props and state to determine if re-rendering is necessary, optimizing performance by preventing unnecessary re-renders when props and state remain unchanged.

21
Q

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

A
  • Mounting, Updating, and Unmounting.
22
Q

What are the different ways that you can call setState?

A

As an object, a function, or a callback function as an argument.

23
Q

What do you know about controlled and uncontrolled components?

A

Controlled components in React have their value controlled by React state, ensuring consistency, while uncontrolled components manage their own state internally using refs and are more straightforward for certain scenarios.

24
Q

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

A

Due to the componentized nature of React, everything you see on a webpage is likely a component. A child component is embedded in the JSX of a parent component and receives props that support its own functionality.

25
Q

What is a constructor? Is it required?

A

A constructor is a method that is automatically called during the creation of an object. They initialize state by assigning an object and they bind event methods to an instance. It is not required.

26
Q

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

A

State represents the data that a component is working with. This data may change over time and there is a certain way that it must be updated, using the updater function. State is initialized when a component is first created/ renders.

27
Q

What is an event in React?

A

Any interaction a user has with a webpage such as a button click or a field input that will initiate an update to state. Types include onClick, onChange, onSubmit, onMouseOver, onKeyDown

28
Q

What are synthetic events in React?

A

Synthetic events in React are a cross-browser wrapper around the browser’s native events, providing consistent and normalized behavior across different browsers. They are created and managed by React, allowing for easier event handling and propagation within React components.
<button onClick={handleClick}>Click me</button>
//onClick is the synthetic event

29
Q

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

A

An arrow function is a simple, concise way of defining an anonymous function that does not receive props. It automatically binds ‘this’. They are often used inline functions and simple mapping.

30
Q

What is Higher Order Components(HOC)?

A

An HOC is a pattern that allows you to reuse component logic. It’s a function that takes a component and returns a new component with additional props or modified behavior.

31
Q

What can you do with HOC?

A

You can reuse code logic, manage state and pass it down to wrapped components (such as data received from an api call), add or modify props, conditionally render components based on specified criteria.

32
Q

What is JSX?

A

JSX is a syntax extension for JavaScript that is a combination of JS and HTML.

33
Q

Why can’t browsers read JSX?

A

It is not standard JavaScript, which is what browsers CAN understand. A transpiler (like Babel) transforms the jsx into proper, readable js.

34
Q

What is NPM/Yarn?

A

They are Package Managers that allow developers to manage project dependencies, install packages, and execute scripts. NPM comes on default with Node.js. Yarn was created by Facebook to address shortcomings of NPM. Yarn tends to be faster than NPM.

35
Q

What is Props?

A

Props is information that you pass from a parent component to a child component.

36
Q

What is React Router?

A

It is a library for handling routing in React components. There are 3 categories of routing: The Routers (on index.jsx), Route Matchers (<Routes> and <Route> on App.jsx), and the Navigation (<link></link>/<NavLink> on component).</NavLink></Route></Routes>

37
Q

How is React Router different from conventional routing?

A

It is a library for handling routing in React components. There are 3 categories of routing: The Routers (on index.jsx), Route Matchers (<Routes> and <Route> on App.jsx), and the Navigation (<link></link>/<NavLink> on component).</NavLink></Route></Routes>

38
Q

How is React Router different from conventional routing?

A

Typically, conventional routing is used for MPA’s (Multi Page Applications) that are comprised of many HTML files that will require a full render every time they’re accessed. In contract, React Router works in a SPA (Single Page Application) setting where all components are tied to one single HTML file, so the page will render everything initially and then will only re-render when state changes.

39
Q

What is React.memo?

A

React.memo is a higher-order component (HOC) provided by React that memoizes a functional component, preventing unnecessary re-renders by caching the result of the component’s render method and reusing it when the component’s props have not changed.

40
Q

What is React?

A

React is a JavaScript library for building user interfaces, developed by Facebook, that uses a component-based architecture for creating reusable and interactive UI components.

41
Q

What is the difference between calling a promise and using a .then vs using await?

A

.The difference is in how you handle asynchronous operations: .then() is used with promises to handle asynchronous operations by chaining callbacks, while await is used with async/await syntax to pause execution until the promise is resolved, simplifying asynchronous code and making it look synchronous.

42
Q

What is the significance of keys in React?

A

Keys in React are used to uniquely identify elements in a collection (such as arrays of JSX elements) and help React efficiently update the UI by minimizing re-renders and optimizing component reordering and reconciliation.

43
Q

What is the virtual DOM? Explain how it works within ReactJS.

A

It is an abstraction of the actual DOM that compares the current state to the incoming state and only renders what is different.

44
Q

Why do we need a Router in React?

A

We need a router in React to manage navigation and maintain UI state across different views or pages within a single-page application (SPA), allowing users to navigate between different components or pages while keeping the URL in sync with the application state.

45
Q

Why is Switch component used in React Router v4?

A

Switch has been replaced by <Routes> to scan through each listed <Route> to find a matching path. When it finds the first matching path, it renders the corresponding UI based on the assigned component.</Route></Routes>

46
Q

When do you use switch?

A

In C#, you use the switch statement when you have multiple possible cases or conditions to evaluate against a single variable or expression, allowing you to execute different blocks of code based on the value of the variable. This is particularly useful when you have a series of conditions that can be efficiently evaluated with a single switch statement rather than multiple if-else statements.