React Flashcards

1
Q

How does React work?

A

React creates a virtual DOM. When state changes in a component it firstly runs a “diffing” algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.

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

What is React?

A

React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications. React’s core purpose is to build UI components; it is often referred to as just the “V” (View) in an “MVC” architecture.

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

What are props in React?

A

Props are properties that are passed into a child component from its parent, and are readonly.

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

How would you write an inline style in React?

A

witihn a div. style=({ x:, y: })

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

What is ReactJS?

A

ReactJS is an open-source frontend JavaScript library which is used for building user interfaces especifically for single page applications. It is used for handling view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. ReactJS was first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.

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

What are the major features of ReactJS?

A

The major features of ReactJS are as follows,

It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive.
Supports server-side rendering
Follows Unidirectional data flow or data binding
Uses reusable/composable UI components to develop the view

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

What is the use of refs?

A

The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when we need direct access to DOM element or an instance of a component.

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

What is virtual DOM?

A

The virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

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

What is context?

A

Context provides a way to pass data through the component tree without having to pass props down manually at every level. For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.

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

What are the advantages of ReactJS?

A

Below are the advantages of ReactJS:

Increases the application’s performance with Virtual DOM
JSX makes code is easy to read and write
It renders both on client and server side
Easy to integrate with other frameworks (Angular, BackboneJS) since it is only a view library
Easy to write UI Test cases and integration with tools such as JEST.

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

What is JEST?

A

Jest is a JavaScript unit testing framework made by Facebook based on Jasmine and provides automated mock creation and a jsdom environment. It’s often used for testing React components.

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

How do you prevent the default behavior in an event callback in React?

A

You call e.preventDefault(); on the event e passed into the callback.

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

What happens when you call “setState”?

A

The first thing React will do when setState is called is merge the object you passed into setState into the current state of the component. This will kick off a process called reconciliation. The end goal of reconciliation is to, in the most efficient way possible, update the UI based on this new state.

To do this, React will construct a new tree of React elements (which you can think of as an object representation of your UI). Once it has this tree, in order to figure out how the UI should change in response to the new state, React will diff this new tree against the previous element tree.

By doing this, React will then know the exact changes which occurred, and by knowing exactly what changes occurred, will able to minimize its footprint on the UI by only making updates where absolutely necessary.

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

What’s the difference between an “Element” and a “Component” in React?What’s the difference between an “Element” and a “Component” in React?

A

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI.

A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets transpiled to a createElement invocation).

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

What are the advantages of using React?

A

It is easy to know how a component is rendered, you just need to look at the render function.
JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.
You can render React on the server-side. This enables improves SEO and performance.
It is easy to test.
You can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.

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

What are the differences between a class component and functional component?

A

Class components allows you to use additional features such as local state and lifecycle hooks. Also, to enable your component to have direct access to your store and thus holds state.

When your component just receives props and renders them to the page, this is a stateless component, for which a pure function can be used. These are also called dumb components or presentational components.

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

What is the difference between state and props?

A

The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

Props (short for properties) are a Component’s configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.

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

Where in a React component should you make an AJAX request?

A

componentDidMount is where an AJAX request should be made in a React component.

This method will be executed when the component “mounts” (is added to the DOM) for the first time. This method is only executed once during the component’s life. Importantly, you can’t guarantee the AJAX request will have resolved before the component mounts. If it doesn’t, that would mean that you’d be trying to setState on an unmounted component, which would not work. Making your AJAX request in componentDidMount will guarantee that there’s a component to update.

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

How is React different from AngularJS (1.x)?

A

For example, AngularJS (1.x) approaches building an application by extending HTML markup and injecting various constructs (e.g. Directives, Controllers, Services) at runtime. As a result, AngularJS is very opinionated about the greater architecture of your application — these abstractions are certainly useful in some cases, but they come at the cost of flexibility.

By contrast, React focuses exclusively on the creation of components, and has few (if any) opinions about an application’s architecture. This allows a developer an incredible amount of flexibility in choosing the architecture they deem “best” — though it also places the responsibility of choosing (or building) those parts on the developer.

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

What happens during the lifecycle of a React component?

A

At the highest level, React components have lifecycle events that fall into three general categories:

Initialization
State/Property Updates
Destruction

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

What are refs used for in React?

A

Refs are an escape hatch which allow you to get direct access to a DOM element or an instance of a component. In order to use them you add a ref attribute to your component whose value is a callback function which will receive the underlying DOM element or the mounted instance of the component as its first argument.

Above notice that our input field has a ref attribute whose value is a function. That function receives the actual DOM element of input which we then put on the instance in order to have access to it inside of the handleSubmit function.

It’s often misconstrued that you need to use a class component in order to use refs, but refs can also be used with functional components by leveraging closures in JavaScript.

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

When rendering a list what is a key and what is it’s purpose?

A

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow.

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

What does it mean for a component to be mounted in React?

A

It has a corresponding element created in the DOM and is connected to that.

24
Q

How would you prevent a component from rendering in React?

A

Return null from the render method.

25
Q

What’s the difference between a controlled component and an uncontrolled one in React?

A

A controlled component has its state completely driven by React,
Uncontrolled components can maintain their own internal state. E.g., a textarea’s value.

26
Q

What happens when you call setState?

A

The state property is updated in a React component with the object passed into setState, and this is done asynchronously. It tells React that this component and its children need to be re-rendered, but React may not do this immediately (it may batch these state update requests for better performance).

27
Q

What is the point of Redux?

A

Application state management that is easy to reason about, maintain and manage in an asynchronous web application environment.

28
Q

Where is the state kept in a React + Redux application?

A

In the store.`

29
Q

What is Flux?

A

Unidrectional application flow paradigm popular a few years back in React; mostly superceded by Redux these days.

30
Q

What is JSX?

A

JSX is a syntax notation for JavaScript XML(XML-like syntax extension to ECMAScript). It stands for JavaScript XML. It provides expressiveness of JavaScript along with HTML like template syntax. For example, the below text inside h1 tag return as javascript function to the render function,

31
Q

What is the difference between Element and Component?

A

An element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.

32
Q

How to create components in ReactJS?

A

Functional components: This is the simplest way to create ReactJS components. It accepts props as an Object and returns ReactJS elements. We call it as “functional” because those are pure JavaScript functions.

You can also use Es6 class to define component.

33
Q

What is state in ReactJS?

A

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.

34
Q

What is the difference between state and props?

A

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. i.e,

Props get passed to the component similar to function parameters
state is managed within the component similar to variables declared within a function.

35
Q

What is the purpose of callback function as an argument of setState?

A

The callback function is invoked when setState finished and the component gets rendered. Since setState is asynchronous the callback function is used for any post action.

36
Q

How to pass a parameter to an event handler or callback?

A

You can use an arrow function to wrap around an event handler and pass parameters:

this.handleClick(id)} />
This is equivalent to calling .bind as below,

37
Q

What is inline conditional expressions?

A

You can use either if statements or ternary expressions which are available from JS to conditionally render expressions. Apart from these approaches, you can also embed any expressions in JSX by wrapping them in curly braces and then followed by JS logical operator(&&).

38
Q

How to create refs?

A

Refs are created using React.createRef() method and attached to React elements via the ref attribute. In order to use refs throughout the component, just assign the ref to the instance property with in constructor.

39
Q

What are controlled components?

A

A ReactJS component that controls the input elements within the forms on subsequent user input is called “Controlled component”. i.e, every state mutation will have an associated handler function.

40
Q

What are Higher-Order components?

A

A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it’s a pattern that is derived from React’s compositional nature We call them as “pure’ components” because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components.

const EnhancedComponent = higherOrderComponent(WrappedComponent);
HOC can be used for many use cases as below,

Code reuse, logic and bootstrap abstraction
Render High jacking
State abstraction and manipulation
Props manipulation

41
Q

What is the purpose of using super constructor with props argument?

A

A child class constructor cannot make use of this reference until super() method has been called. The same applies for ES6 sub-classes as well. The main reason of passing props parameter to super() call is to access this.props in your child constructors.

42
Q

What is reconciliation?

A

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

43
Q

Why is it necessary to capitalize the components?

A

It is necessary because components are not the DOM element but they are constructors. If they are not capitalized, they can cause various issues and can confuse developers with several elements.

44
Q

What are fragments?

A

It’s common pattern in React which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

45
Q

What are portals in ReactJS?

A

Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

ReactDOM.createPortal(child, container);

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument (container) is a DOM element.

46
Q

What are stateless components?

A

If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for stateless functional components. There are a lot of benefits if you decide to use stateless functional components here; they are easy to write, understand, and test, and you can avoid the this keyword altogether.

47
Q

What are stateful components?

A

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These Stateful components are always class components and have a state that gets initialized in the constructor.

48
Q

What are the limitations of ReactJS?

A

Below are the list of limitations:

React is just a view library, not a full-blown framework
There is a learning curve for beginners who are new to web development.
Integrating React.js into a traditional MVC framework requires some additional configuration
The code complexity increases with inline templating and JSX.
Too many smaller components leading to over-engineering or boilerplate

49
Q

How error boundaries handled in React (15)?

A

React15 provided very basic support for error boundaries using the method name unstable_handleError. Later this has been renamed as componentDidCatch starting from React16 beta release.

50
Q

What is Flow?

A

Flow is a static type checker, designed to find type errors in JavaScript programs, created by Facebook. Flow types can express much more fine-grained distinctions than traditional type systems. For example, Flow helps you catch errors involving null, unlike most type systems.

51
Q

What is the difference between React Native and React?

A

ReactJS is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

52
Q

What is the difference between component and container in react Redux?

A

Component is part of the React API. A Component is a class or function that describes part of a React UI. Container is an informal term for a React component that is connected to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don’t render DOM elements; they delegate rendering to presentational child components.

53
Q

When to use a Class Component over a Functional Component?

A

If the component need state or lifecycle methods then use class component otherwise use functional component.

54
Q

What is the difference between a Presentational component and a Container component?

A

Presentational components are concerned with how things look. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state.

Container components are more concerned with how things work. These components provide the data and behavior to presentational or other container components. They call Flux actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources.

55
Q

Describe how events are handled in React.

A

In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events you’re used to, except they work identically across all browsers.

What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.

56
Q

what is PureComponent ?

A

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.