What are Higher-Order components?
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
What are the differences between a class component and functional component?
Class Components
- Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods.
- Class components extend from React. Component.
- In here you have to use this keyword to access the props and functions that you declare inside the class components.
Functional Components
- Functional Components are simpler comparing to class-based functions.
- Functional Components mainly focuses on the UI of the application, not on the behavior.
- To be more precise these are basically render function in the class component.
- Functional Components can have state and mimic lifecycle events using Reach Hooks
What does it mean for a component to be mounted in React?
It has a corresponding element created in the DOM and is connected to that.
React JS Interview Question
How React works? How Virtual-DOM works in React?
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.
The HTML DOM is always tree-structured — which is allowed by the structure of HTML document. The DOM trees are huge nowadays because of large apps. Since we are more and more pushed towards dynamic web apps (Single Page Applications — SPAs), we need to modify the DOM tree incessantly and a lot. And this is a real performance and development pain.
The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. It is not invented by React but it uses it and provides it for free. ReactElements lives in the virtual DOM. They make the basic nodes here. Once we defined the elements, ReactElements can be render into the “real” DOM.
Whenever a ReactComponent is changing the state, diff algorithm in React runs and identifies what has changed. And then it updates the DOM with the results of diff. The point is – it’s done faster than it would be in the regular DOM.
What are the differences between a class component and functional component?
Class components allows us to use additional features such as local state and lifecycle hooks. Also, to enable our component to have direct access to our store and thus holds state.
When our 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.
From the previous question, we can say that our Booklist component is functional components and are stateless.
On the other hand, the BookListContainer component is a class component.
What are controlled components?
In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in it’s state and will re-render the component each time the callback function e.g. onChange is fired as the state will be updated. A form element whose value is controlled by React in this way is called a “controlled component”.
With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input.
Advance React JS Interview Question
What is a higher order component?
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that emerges from React’s compositional nature.
A higher-order component is a function that takes a component and returns a new component.
HOC’s allow you to reuse code, logic and bootstrap abstraction. HOCs are common in third-party React libraries. The most common is probably Redux’s connect function. Beyond simply sharing utility libraries and simple composition, HOCs are the best way to share behavior between React Components. If you find yourself writing a lot of code in different places that does the same thing, you may be able to refactor that code into a reusable HOC.
What is Redux Thunk used for?
Redux thunk is middleware that allows us to write action creators that return a function instead of an action. The thunk can then be used to delay the dispatch of an action if a certain condition is met. This allows us to handle the asyncronous dispatching of actions. The inner function receives the store methods dispatch and getState as parameters.
To enable Redux Thunk, we need to use applyMiddleware() as below
How Virtual-DOM is more efficient than Dirty checking?
In React, each of our components have a state. This state is like an observable. Essentially, React knows when to re-render the scene because it is able to observe when this data changes. Dirty checking is slower than observables because we must poll the data at a regular interval and check all of the values in the data structure recursively. By comparison, setting a value on the state will signal to a listener that some state has changed, so React can simply listen for change events on the state and queue up re-rendering.
The virtual DOM is used for efficient re-rendering of the DOM. This isn’t really related to dirty checking your data. We could re-render using a virtual DOM with or without dirty checking. In fact, the diff algorithm is a dirty checker itself.
We aim to re-render the virtual tree only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs. If nothing has changed, we do nothing.
React JS Interview Question
What are controlled and uncontrolled components in React?
This relates to state full DOM components (form elements) and the difference:
- A Controlled Component is one that takes its current value through props and notifies changes through callbacks like on Change. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.
- A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.
In most (or all) cases we should use controlled components.
Explain the components of Redux.
Redux is composed of the following components:
- Action — Actions are payloads of information that send data from our application to our store. They are the only source of information for the store. We send them to the store using
store.dispatch(). Primarly, they are just an object describes what happened in our app. - Reducer — Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes. So this place determines how state will change to an action.
- Store — The Store is the object that brings Action and Reducer together. The store has the following responsibilities: Holds application state; Allows access to state via
getState(); Allows state to be updated viadispatch(action); Registers listeners viasubscribe(listener); Handles unregistering of listeners via the function returned bysubscribe(listener).
It’s important to note that we’ll only have a single store in a Redux application. When we want to split your data handling logic, we’ll use reducer composition instead of many stores.
What is the difference between React Native and React?
React is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.
On the other hand, React Native is a mobile framework that compiles to native app components, allowing us to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows us to use React JS to build our components, and implements React JS under the hood.
With React Native it is possible to mimic the behavior of the native app in JavaScript and at the end, we will get platform specific code as the output. We may even mix the native code with the JavaScript if we need to optimize our application further.
Advance React JS Interview Question
Does React use HTML?
No, It uses JSX, which is similar to HTML.
When was React first released?
React was first released on March 2013.
Give me two most significant drawbacks of React
- Integrating React with the MVC framework like Rails requires complex configuration.
- React require the users to have knowledge about the integration of user interface into MVC framework.
React JS Interview Question
What is Flux Concept In React?
Facebook widely uses flux architecture concept for developing client-side web applications. It is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.
Define the term Redux in React
Redux is a library used for front end development. It is a state container for JavaScript applications which should be used for the applications state management. You can test and run an application developed with Redux in different environments.
What is the ‘Store’ feature in Redux?
Redux has a feature called ‘Store’ which allows you to save the application’s entire State at one place. Therefore all it’s component’s State are stored in the Store so that you will get regular updates directly from the Store. The single state tree helps you to keep track of changes over time and debug or inspect the application.
Advance React JS Interview Question
What is an action in Redux?
It is a function which returns an action object. The action-type and the action data are always stored in the action object. Actions can send data between the Store and the software application. All information retrieved by the Store is produced by the actions.
Name the important features of React
Here, are important features of React.
- Allows you to use 3rd party libraries
- Time-Saving
- Faster Development
- Simplicity and Composable
- Fully supported by Facebook.
- Code Stability with One-directional data binding
- React Components
Explain React Router
React Router is a routing library which allows you to add new screen flows to your application, and it also keeps URL in sync with what’s being shown on the page.
React JS Interview Question
What are the popular animation package in React ecosystem?
Popular animation package in React ecosystem are
- React Motion
- React Transition Group
What are Props in react js?
Props mean properties, which is a way of passing data from parent to child. We can say that props are just a communication channel between components. It is always moving from parent to child component.
What is the use of a super keyword in React?
The super keyword helps you to access and call functions on an object’s parent.
Advance React JS Interview Question
Name two types of React component
Two types of react Components are:
- Function component
- Class component
Explain synthetic event in React js
Synthetic event is a kind of object which acts as a cross-browser wrapper around the browser’s native event. It also helps us to combine the behaviors of various browser into signal API.
What is React State?
It is an object which decides how a specific component renders and how it behaves. The state stores the information which can be changed over the lifetime of a React component.
React JS Interview Question
How can you update state in react js?
A state can be updated on the component directly or indirectly.
Explain the use of the arrow function in React
The arrow function helps you to predict the behavior of bugs when passed as a callback. Therefore, it prevents bug caused by this all together.
What are the lifecycle steps of React?
Important lifecycle steps of React js are:
- Initialization
- State/Property updates
- Destruction are the lifecycle of React
Advance React JS Interview Question
Explain pure components in React JS
Pure components are the fastest components which can replace any component with only a render(). It helps you to enhance the simplicity of the code and performance of the application.
What kind of information controls a segment in React?
There are mainly two sorts of information that control a segment: State and Props
- State: State information that will change, we need to utilize State.
- Props: Props are set by the parent and which are settled all through the lifetime of a part.
Explain the use of ‘key’ in react list
Keys allow you to provide each list element with a stable identity. The keys should be unique.
React JS Interview Question
What are the major issues of using MVC architecture in React?
Here are the major challenges you will face while handling MVC architecture:
- DOM handling is quite expensive
- Most of the time applications were slow and inefficient
- Because of circular functions, a complex model has been created around models and ideas
Can you update the values of props?
It is not possible to update the value of props as it is immutable.
Explain react hooks
React hooks allows you to use State, and other React features without writing a class.
Advance React JS Interview Question
What is the main difference between create Element and clone Elment?
- create Element is used by react to create react elements.
- clone Element is used to clone an element and pass it new props.
What are Controlled Components?
Controlled components are component which controls the input elements.
List down some of the methods in a react-dom package
Important methods for react-dom packages are:
- render()
- hydrate()
- createPortal()
- unmountComponentAtNode()
- findDOMNode()
React JS Interview Question
How can we do server-side rendering in React?
We can use reaction serve to do the server-side rendering.
What is refs?
Ref are an attribute of the DOM elements. The primary purpose of the refs is to find the DOM elements easily.
What is ComponentWillMount()
This function is called after the DOM element removes from DOM, and it will swipe the memory, which helps you to increase the access space.
Advance React JS Interview Question
How to dispatch the data in-store?
We can dispatch the data to another component which should be based on the action which stores the parent component.
How will be you able to handle more action using redux?
In order to create the same component in more action flow, we are using the same functionality in various modules.
How can you spill the reducers?
We can spill the rescues based on the event actions. That action should be split in separate modules.
React JS Interview Question
Name any five predefined prototypes used in React
Most important prototype used in React js are:
- number
- string
- array
- object
- element
What is the purpose of using bind Actions Creators?
Bind Action Creator helps you to bind the event based on the action dispatcher to the HTML element.
What is REFS in React
Ref is a reference to the element. It should be avoided in most cases. However, sometimes it is used when you need to access DOM or instance of the component directly.
Advance React JS Interview Question
What is the Current Stable Version of React?
The current stable version of React is version 17.5
State the difference between React JS and React Native
React js is a front end open-source JavaScript library used for building UIs.
React Native, is an open-source, mobile framework which allows developers to user React on platforms like Android and iOS.
