What is React JS? React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It allows developers to change data, without reloading the page[using virtual DOM]. This corresponds to the view layer in the MVC template. In React, instead of using regular JavaScript, it uses JSX. JSX stands for JavaScript XML. To know more, click here What is Virtual DOM? How does it work? In React, there is a concept of Virtual DOM which is like a lightweight copy of the actual DOM. So for every object that exists in the original DOM there is a duplicate for that in Virtual DOM. To understand the detailed working, click here.
What are React components? React Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns individual HTML. There are two types of components: Class components and Functional components.
Functional component vs Class Component
Class component –> Class components are the ones that extend React.Component and have access to the react life-cycle methods. These components can also update the state of the component.
Functional component –> These are just a function that return a particular DOM element. They are also known as stateless components as they don’t have access to state and life-cycle methods.
More detailed differences can be found here.
What are state and props? State and props(acronym for properties) are both simple JS objects, that hold information that influences the output of the component. They have a few differences, props are transferred from one component to another, let it be functional or class component, whereas state is indigenous to a particular class component and can be passed only through props to child components. Props are immutable, whereas state is mutable.
What are the lifecycle phases in React? Lifecycle methods are the different phases in the life of a React class component, from its creation till the end of the component. They are divided in 4 stages.
Initialization -> This is where we should initialize the default state of the component and also the extend the props from the parent React.Component, in case we want to use props in our class component.
Mounting -> The DOM building process starts in this section after the initial state has been initialized. This is the phase where the component is born.
Updating -> This is the phase where the component updates and responds to any state change with respect to any action or API call. Also known as component growth phase.
Unmounting -> This is the phase where the component loses its control and dies. We can make some garbage collection activities under this section.
Explain the different lifecycle methods in details The detailed explanation of the different lifecycle methods is present in this link.
How to call an API after initial page-load? We can make an API call after initial page-load once the DOM has been loaded. That can be done by writing it inside componentDidUpdate lifecycle method.
In which lifecycle method, we shouldn't update state? State update shouldn't be done in the render method and also in the componentWillUpdate method. As the two methods run in case of any update in the state, creating the infinite loop.
What are Pure components in React? Pure components are React class components that are created by extending the React. PureComponent base class. Any component is known as pure if it produces the same HTML element for the same set of props and state passed to it. Any class component can be made into a pure component by modifying the shouldComponentUpdate lifecycle method.
How do you update state in React? We can update the state directly, but we SHOULD NOT. That is because, whenever we update the state, directly, it works quite fine and won’t produce any error, until we encounter a Pure-component somewhere in the downstream as a child component that uses the state of the parent component as a property to render itself wherever there is a change in the state of the parent component. Hence we should update the state using the setState() method. Detailed explanation on how state update works in given here.
What are refs in React? React refs can be thought of a way of updating a particular element in the DOM without updating the entire component. For example, focusing an element after state update or an API call. It is mostly used in -
Managing focus, text selection or media playback.
Using third-party libraries.
Displaying animations
To understand how to use refs, click here.
What is Higher Order Component/ Higher Order Function? Higher Order Component(HOC) is a pattern in React to reuse the functionality inside a component without rewriting the same code. HOC can be thought as a function that takes in a component and returns another component with some modifications to the input component. One common example of HOC is the connect function which we use to connect a third party Redux store to our class component. To understand the HOC in details, click here.
What are React events? Events are nothing but user actions performed on DOM elements. Just like HTML, React also, allows actions based on user events. React has the same events as HTML: click, change, mouseover etc.
What are React event handlers? In React, we pass a function for handling the events known as event handler. There are several ways to handle events in components. Below are the different ways:
Binding the method with 'this' keyword.
Binding the handler in the event callback itself.
Arrow function.
Arrow function in the event callback
Detailed explanation of all the above ways with syntax is given here.
What is preventDefault? In React, for preventing the default behavior of an event, like reloading a page, we use event.preventDefault method.
Which event handler to use and why?
Binding the handler in the event callback itself, Arrow function in the event callback -> are not performance friendly, as every time the render method is called, there is an unnecessary implicit or explicit binding with the event handler function, even though the functions are already defined.
Binding the method with 'this' keyword -> is invoked only once, during initialization phase, but failing to bind the method in the constructor, would create issues.
Arrow function -> doesn’t have any performance issues.
So we should use Arrow functions as event handlers for better performance and should keep the syntax in mind.
Comments