React

What are the three principles that Redux follows?

- Single source of truth: Redux uses 'Store' for storing the application's entire state at one place. - State is read-only: The only way to change the state is to trigger an action. - Changes are made with pure functions: Pure functions are those whose return value depends solely on the values of their arguments.

Why do we need a Router in React?

A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any 'route' defined inside the router, then the user is redirected to that particular route.

How does the virtual DOM work?

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. This Virtual DOM works in three simple steps: 1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation. 2. Then the difference between the previous DOM representation and the new one is calculated. 3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

List down the components of Redux.

Action - It's an object that describes what happened. Reducer - It is a place to determine how the state will change. Store - State/ Object tree of the entire application is saved in the Store. View - Simply displays the data provided by the Store.

Why can't browsers read JSX?

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

Explain the purpose of render() in React.

Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component.

React unit tests vs integration tests for components.

Enzyme, Jest

What are Higher Order Components(HOC)?

Higher-order functions in JavaScript take some functions as arguments and return another function. They enable us to abstract over actions, not just values, They come in several forms, and they help us to write less code when operating on functions and even arrays. Some examples of higher-order functions are the following: .forEach(), .may(), reduce(), filter() A higher-order component (HOC) is an advanced element for reusing logic in React components. Components take one or more components as arguments, and return a new upgraded component. HOCs are commonly used to design components with certain shared behavior in a way that makes them connected differently than normal state-to-props pattern. Facts about HOCs: 1. We don't modify or mutate components. We create new ones. 2. A HOC is used to compose components for code reuse. 3. A HOC is a pure function. It has no side effects, returning only a new component. Examples: connect(mapStateToProps, mapDispatchToProps)(UserPage) withRouter(UserPage) withStyles(styles)(UserPage)

Describe React Hooks

Hooks are functions that let you "hook into" React state and lifecycle features from function components. Hooks don't work inside classes — they let you use React without classes. React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components.

List some of the major advantages of React

It increases the application's performance It can be conveniently used on the client as well as server side Because of JSX, code's readability increases React is easy to integrate with other frameworks like Meteor, Angular, etc. Using React, writing UI test cases become extremely easy

What is JSX?

JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This file makes applications robust and boosts its performance.

Give an example of HOC

Let's say we have a simple Button component: const Button = props => <button {...props}>Hello</button>; We want to create a HOC for making a red border for our Button component const withRedBorder = Component => (props) => ( <Component {...props} style={{ border: "1px solid red" }} /> ); And now we can create a RedButton component: const RedButton = withRedBorder(Button);// and use it as:<RedButton />

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

Mounting: These methods are called in the following order when an instance of a component is being created and inserted into the DOM: constructor() static getDerivedStateFromProps() render() componentDidMount() Updating An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered: static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting This method is called when a component is being removed from the DOM: componentWillUnmount()

What is Props?

Props is the shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable.

What is React Router?

React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. It maintains a standardized structure and behavior and is used for developing single page web applications. Example sytax: <Link to="/">Home</Link> <Route path="/about"> <Route path={`${match.path}/:topicId`}>

Differentiate between Real DOM and Virtual DOM.

Real DOM: updates slow, can directly update HTML, Creates a new DOM if element updates, DOM manipulation is very expensive., Too much of memory wastage. Virtual DOM: updates faster, can't directly update HTML, Updates the JSX if element updates, DOM manipulation is very easy, No memory wastage Virtual DOM is a "virtual" representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM

What do you understand by refs in React?

Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component Refs provide a way to access DOM nodes or React elements created in the render method. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.

How can you update the state of a component?

State of a component can be updated using this.setState().

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

States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this.state().

Why is switch keyword used in React Router v4?

The 'switch' keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The <switch> tag when in use matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route. Thereby bypassing the remaining routes.

How do you modularize code in React?

We can modularize code by using the export and import properties.

List some of the cases when you should use Refs.

When you need to manage focus, select text or media playback To trigger imperative animations Integrate with third-party DOM libraries

Migration from Class to Function Components.

With function components and hooks you can cover all class components use-cases, such as: - Class component state with useState hook - Class component lifecycle methods with useEffect hook - Bonus points: better abstraction with custom hooks https://usehooks.com/

How does data flow through Redux?

You have your view component and redux components You connect your redux components to your view component by importing actions and mapping the current state of the redux stores to your view component and dispatching actions to the store When an something happens in the app, the redux action is dispatched, then the reducer function is run with previous state and current action and then returns the new state The store notifies parts of the UI that are subscribed to it that the state has changed. Each component checks to see if their state has changed. If the state has changed, the component re-renders.