render() method returns component layout in JSX format. It defines what the component needs to look like. The method is also responsible for updating the DOM whenever there is a change to internal component data.
Virtual DOM, rendering and re rendering in React Js
React maintains its own image of what the DOM should look like, called virtual DOM. Calling render() method updates that image.
render() method is called every time React notices changes in component’s (or its parent’s) state or props. It gives React the most up-to-date information to update virtual DOM. In other words, update its image of what the component needs to look like.
Sometimes a small change in a component’s state triggers the re-render of all its children components in the component tree. This might seem inefficient, but React elements returned by the render() function are just plain JavaScript objects. Creating and updating them takes very little resources.
React rerenders entire component trees to ensure that virtual DOM stays up to date with most recent changes in the app.
To reiterate, render() updates virtual DOM, it does not directly update the HTML. React compares virtual DOM with actual HTML, and updates the actual DOM.
For further details about virtual DOM, refer to official React documentation.
What is render in React js
In React, rendering is another word for updating the virtual DOM. The function is called the first time a user sees an application and every time there’s a change to state and props.
Since reactivity is one of the main features of React, render() is one of the library’s main features.
Render in class components
Every React class component must have a render() method that returns JSX code.
The function body must contain a return statement with a JSX template.
When it comes to return statements, React has one rule: every component must return one element, or one container that wraps around a group of elements.
Let’s look at a basic example of a class component in React.
class HelloWorld extends Component {
render() {
return (
<div>
<p>Hello, World</p>
<p>Lorem ipsum</p>
</div>
)
}
}Render in functional components
Functional components do not have an explicit render() method.
Their structure is very similar to the render() method itself. For example, it is necessary for them to have a return statement.
function HelloWorld() {
return (
<div>Hello, World!</div>
)
}Functional components return JSX just like the render() method in class components. Other rules are the same. For example, a group of elements must be wrapped with a container element.
Purpose of render method in React js
React library uses render method to make applications reactive. It defines what the component should look like, how it’s going to function, and its dynamic features.
It is a common misconception that the render() function directly updates the DOM. That’s not the case. Its purpose is to return component layout in JSX format and update the virtual DOM. React then transpiles JSX to actual HTML and settles the differences between virtual and real DOM.
render() method within the structure of Class Components
Class components are required to have a render() method. Its syntax is a little simpler than in the previous example.
In class components, render() does not take any arguments. It simply returns JSX code, to specify what React elements to render.
class HelloWorld extends Component {
render() {
return (
<div><p>Hello, World</p></div>
)
}
}As for where it should be rendered, that depends on where the component is invoked within its parent component.
export default class App extends Component {
render() {
return (
<div>
<Header></Header>
{/* Component will come after Header and before Footer */}
<Footer></Footer>
</div>
)
}
}Conditional rendering
JSX also supports conditional rendering. All you have to do is use the curly braces syntax to evaluate a JavaScript expression and render a component based on its outcome. Let’s look at an example:
export default class App extends Component {
render() {
return (
<div>
<Header></Header>
{ 5 < 10 ? <HelloWorld></HelloWorld> : null}
<Footer></Footer>
</div>
)
}
}In this example, we have a simple ternary operator that checks if the JavaScript expression ‘5 < 10’ is ‘true’. If it is, JSX will render the ‘<HelloWorld>’ component. If it’s not, it will return ‘null’.
Since it is one of the most important features in React, conditional rendering is covered in depth in a separate tutorial.
💬 Leave a comment