Render means renew only an appropriate part of information on user’s screen when the element properties (props) are replaced by new ones or a component state (as set of props) changes in application. Thanks to the render method, we avoid reloading the whole web page, save time, and increase productivity.
State is special private feature of component which presents sets of props for all the elements included in this component. State is an object which stores the property values that are relevant to a component. Props come from outside, they are inputted by the user or go down from other components situated above in the tree. Official React documentation compares a “top-down” data flow with a waterfall of props, where each component’s state is like an additional water source that joins it at an arbitrary point but also flows down. Render is called only for some of the components, states of which were changed. If props of parent element were replaced by new ones, it automatically calls render for this element and its children and it logically binds elements as well. The state allows React components to change their output over time in response to user actions, network responses, etc. without changing initial data.
Note: Important that just render methods sync data between components.
Virtual React DOM is a copy of real DOM made to optimize updating information after changing props and states. Virtual DOM records all “screenshots” of new element releases made by render method. Since React elements are immutable (cannot be changed), the next element release simply replaces the previous one as in animation, and it’s important to save all of them to manage data of app.
Elements are rendered on the screen by calling the
ReactDOM.render() method which compares the real and virtual DOM elements and its children, making as few changes as possible to bring the real DOM to the modern state.
The process of DOM maintenance includes several stages of Lifecycle, the main ones are mounting and updating.
Mounting is the creation and insertion of the component into the DOM (with render).
Updating means the component upgrades due to changes to its props or state (with render).
Render is called in React JS when the React element (its props) is first instantiated, or when a new component state is established.
As we can see in the greeting example above, render is called just after declaring the element and the variable inside it and update on the screen only value of the variable, without touching other parts of the text, which could take a lot of time.
Consider the visual ticking clock example from official React documentation:
This whole code updates the clock on the screen every second: it calls
ReactDOM.render() every second from a
setInterval() callback. Let’s analyze:
• While code A and C calls render when props as date and initial state as
this.state were declared and the value of date as current local time defined, we see it on our screen when we load the app. React then updates the DOM to match the clock’s render output.
• Code B works based on lifecycle methods in order to update the time every second.
After first rendering, the DOM includes elements with the initial clock state and React applies the
componentDidMount() lifecycle method. Inside it timer is installed which calls the
tick() function every second.
• Inside the
tick() function, React renews the state of the component to match current time and calls
render() again. After this rendering, the DOM includes elements with the new Clock state and React replaces real DOM. Thank to that, users sees a new picture on their screen every second.
• When we close this app, information about the clock component is removed from the DOM. React calls the
componentWillUnmount() lifecycle method so the timer is stopped.
So, when we apply life cycle methods, we can manage time for calling render more in details.
Now, draw your attention to the syntax. While component can be written as a class and as a function, we apply different syntax for it. We write the
render() function inside the class-component but don’t do it in function-component. However, it’s important that render mechanism works in the same way in both situations.
ReactDOM.render() method is always applied to the whole app in index.js file in a standard React package:
import React from 'react'; require('./style.css'); import ReactDOM from 'react-dom'; import App from './app.js'; ReactDOM.render( <App />, document.getElementById('root') );
It is important to follow the syntax rules concerning render because if we declare a new state in the wrong way, then the render will not be called and a desirable picture will not be displayed on the screen.
We can conclude that the React model and library is a perspective approach in programming and render method is one of the most important parts of React mechanism. React saves client’s time, increases code productivity, and minimizes app errors.
View all Courses