Rendering in React
Rendering is the process of converting the code in to a visual representation which people can interact with. This is like how JK Rowling was able to create an imagination in readers mind just with a play of words. Similarly some lines of code can be rendered so anyone can see and understand it better.
In React, rendering is done with the help of JSX. JSX is simply a file type where developer can code HTML like syntax directly in a JavaScript file. JSX code then is being converted in to React elements which are used to construct the virtual DOM. Virtual DOM is an exact representation of the real DOM also called document object model.
The first time a webpage loads in a browser, the initial rendering happens. In react when this is about to happen; react construct the virtual DOM first with the help of a tree of react elements. After that through a process known as diffing, react constructs the real DOM with the help of the virtual DOM. Although this 2 step process can seem like its slowing down this is extremely valuable in the long run.
Virtual DOM is extremely helpful in updating the DOM in re-rendering. Re-rendering happens whenever there is a change in an element of the webpage. Consider there is a clock that changes every second on the webpage. In this clock; every second, the number should change in to the next number. So that mean every second technically the webpage should reload the elements. This change in the visual representation is what referred to as re-rendering.
When the element changes every second in the page, the whole page should reload all the elements. But in react, use of VDOM (virtual DOM) changes this way. The process called diffing helps to let the page only re-render the specific element. In here according to the changes, React first updates the VDOM and then it compares with the previous VDOM. From this react can identify which elements needs to change in the real DOM. In here React checks all the nodes in a depth-first traversal. Which means the checking starts from the top most node and then checks all the nodes one by one until it reaches the end of that node which also known as the leaf node. Then React backtracks on that node to find the changes.
After finding the changes and isolating the elements need to change, with the process referred to as reconciliation, React updates the real DOM.
Another important thing in rendering is React component. React follows a component based architecture and contains 3 types of components.
Here class components are constructed based on the JavaScript classes. Even though class components contain a more complex, less intuitive code unlike functional components, class components are extremely useful in certain scenarios like when we have to use complex lifecycle methods. On the other hand, functional components have a very simple code layout and are considered stateless ideally. Stateless means that it doesn’t use state. Although, in React 16.8 the concept of react hooks were introduced and that opened the possibility of accessing states and lifecycle methods for functional components as well. While class component consist of classes, a functional component is based on functions. With the introduction of hooks functional components were able to keep a clean and simple code while accessing states and lifecycle methods as well making it the ideal and preferred component type. The third type which is Hook-based components is functional components that use React hooks. So a hook-based component is also a functional component. Or a sub category of functional component which simply uses react hooks. Although it’s considered the optimal choice to use functional components in most of the cases, there are still some situations where class components should be used. For example, when working with legacy code or with an old library it is better to use class components in the traditional way. Legacy code refers to code that was written before the introduction of React hooks in version 16.8. In a situation like this it is better to stick to the class components.
Components play a large role in rendering. Since React has a component based architecture, components helps to create the tree and assist in the rendering process. Therefore, it is important to develop good components that are customized to the specific requirements.
Another important aspect of rendering in React is JSX. The use of JSX makes React more powerful, highly performant, and easier to manipulate. JSX, an abbreviation for JavaScript XML, enables HTML-like syntax to be written in JavaScript. This syntax extension in JavaScript makes it more legible to write HTML tags, unlike in JavaScript. Additionally, JSX allows valid JavaScript statements to be embedded dynamically using curly braces.
JSX tags, which are similar to HTML, are converted to JavaScript objects using a build tool like Babel. For example, the JSX tag <div className={”container”}>Hello</div> is converted to the JavaScript object React.createElement(“div”, { className: “container” }, “Hello”).
Once this conversion takes place, the JavaScript objects are transferred to the VDOM, which updates the real DOM using diffing. As a result, using JSX is highly performant and scalable for constructing the VDOM.
Recommended by LinkedIn
Changing the real DOM based on the VDOM is known as reconciliation. Reconciliation consists of diffing process as well. So basically while reconcile means to sync multiple different things together in react the concept of reconciliation is comparing the VDOM and the real DOM replicating the updates to the real DOM. With the help of diffing, react can isolate the elements that actually needs to change and then constructing the VDOM. With this since only the elements that actually require updates does change in the DOM, this results in faster rendering of webpages.
Reconciliation also groups multiple updates into batches and reduces recurring updates for a single element. The concept of the event loop in JavaScript, while react using it to maintain the performance in its single-threaded architecture, event loop batches multiple updates to a single element in to a single update for better performance. Overall, the concept of reconciliation in react helps to improve the performance of the rendering process.
Apart from these, there are a several techniques to improve the performance in the React rendering process. One of them is the shouldComponentUpdate lifecycle method. With the help of this method, React can determine whether the component should or should not re-render. Developers can prevent unnecessary re-rendering using this method.
By using React’s PureComponent, the concept of “shouldComponentUpdate” applies by default. PureComponent can analyze and determine whether it should re-render or not. If there is no change in the state or props, the component will not re-render. Using PureComponents can be a significant benefit in rendering.
Another way is using the React.memo tool. This tool memorizes the state or prop changes and can see if the component has any new changes. If there are no changes with the previous state or prop, it has stored the page, so it doesn’t need to re-render. In this way, React.memo can avoid unnecessary re-rendering.
In addition, using best practices and removing repeated lines of code that might trigger a re-render, using immutable data structures that cannot change their content, and using functional components that are lightweight and more readable can help achieve a more optimized rendering process.
To add to that, HOCs and render props play a powerful role in improving the performance of rendering. HOCs, which refer to higher order components, are simply enhanced versions of normal components. They allow a function in React to modify the behavior of a component, adding or changing functionality, similar to how a mechanic may modify a vehicle by changing the engine, tires, etc. The modified component returned by the function is known as a higher order component.
On the other hand, render props are traditional props that send a function instead of a variable. This function returns JSX elements, allowing the parent component to send a render prop to the child containing a function in the parent component that returns JSX elements. The child component can then use this prop to render itself according to the elements provided by the parent.
By using HOCs and render props, it becomes easier to reuse code and dynamically render components, thus improving performance in rendering.
In summary, React employs concepts such as diffing and reconciliation to optimize rendering performance. Furthermore, it offers developers various techniques to enhance the rendering process. By utilizing methods such as shouldComponentUpdate and advanced concepts like Higher-Order Components (HOCs) and render props, developers can significantly improve rendering efficiency
While it is important to consider rendering optimizations to achieve better performance, it should also be noted that some of these optimizations may introduce increased complexity or reduced flexibility. Therefore, developers must carefully evaluate the trade-offs before implementing them.
#ReactJS #JSX #VirtualDOM #Rendering #FrontEndDevelopment #UIUXDesign #WebDevelopment #WebDesign #Programming #Coding #SoftwareEngineering #ReactComponents #ComponentBasedArchitecture #FunctionalComponents #ClassComponents #ReactHooks #LegacyCode #PerformanceOptimization #UserInterface #UserExperience