Virtual DOM and diffing- algorithm:
For any web application, DOM manipulation is a necessary part. But it is quite a slow process in Real DOM. Virtual DOM was introduced to solve the problem of inefficient updating. For every object in DOM, there is corresponding virtual DOM. When the state of the object changes, virtual DOM only changes that part of the object in the real DOM but it doesn’t update the whole object. React basically works with two virtual DOMs to render the user interface. One is used to hold the previous state of the object and the other is used to hold the current state of the object. If the virtual DOM updates, react starts comparing the two virtual DOMs to know where the update happens and then renders that particular object in the real DOM.
JSX:
JSX stands for Javascript XML. It describes what the UI should look like. Using JSX, HTML structures can be written in the same file with Javascript codes.
Component Lifecycle:
Each React Component has a life cycle that we can monitor and manipulate in the three phases. Mounting, updating, and unmounting are the three phases of a react component's lifecycle.
Mounting is used to put elements into the DOM.Update happens when there is a change in any state or props. When a component is removed from the DOM, unmounting is called.
Context API:
The process in which props are passed through the tree from one part to another is called prop drilling. But in this process, props go through the parts of the tree that don’t need the data. It makes the application unmanageable and complex. To solve this problem the concept of context API was introduced.
Context API is a way in React to share data to any component by storing the data in a central place and giving access to any component that needs it. To apply context API, React.createContext() is needed that returns two components, a provider and a consumer. The provider provides states to the children components and consumer consumes and uses the states.
Custom hooks:
Custom hooks in React are used to add unique and special functionalities to react applications. Custom hooks start with ‘use’ and can call other hooks.
function clientStatus(props) {
Const isAvailable = useClientStatus(props.clientId){
if(isAvailable === null){
return ‘Checking’;
}
return isAvailable? ‘Available’ : ‘Not Available’;
}
Optimize a react js application:
We can optimize a react js application by:
Using functional component
Dependency optimization
Using react fragments
Avoid using the index as a key for the map
Avoid props in the initial state
Optimizing dependencies
Top comments (0)