All React components have logic and JSX. The render() function has a return statement which returns component template written in JSX. The code looks a lot like HTML, but it is actually JavaScript. JSX template defines what the component needs to look like and its custom functionality. So it’s very important.
The render() method is responsible for updating the screen when needed. Most of the time, dynamic appearance of elements depends on state and/or prop values. Whenever state and prop values change, React calls the render() method. This is the basic use for this important method. In this article, we’ll take a closer look at the render() method, when it is called, and other use cases.
Virtual DOM
This is one of the most important concepts in React. Virtual DOM is React’s internal image of what the page should look like. Whenever state and prop values change, React updates the mirror image (virtual DOM). Then React internally synchronizes this image with actual DOM and shows updates on the page. All of this happens very seamlessly and keeps React efficient. This allows us to implement great UX features like clearing form after it is submitted. More about that in this guide.
The render() method updates virtual DOM image of the component. The default behavior is that React updates virtual DOM for the component itself, as well as its children components. This would be inefficient for real DOM. However, virtual DOM is just a shadow image and much more lightweight. For this reason, React is fairly efficient and changes the DOM almost immediately.
An important distinction is that the render() function affects only virtual DOM. It does not render the actual HTML page. React automatically handles differences between virtual DOM and real DOM.
What does rendering mean?
Rendering refers to the action of displaying web apps on the screen. It is also commonly referred to as updating the screen. There’s even a componentDidUpdate() lifecycle method in React. You can use it to run a side-effect every time the component re-renders. In functional components, you use the useEffect() to do the same.
componentDidMount() lifecycle method refers to the time when the component is first rendered. Once it is rendered, then componentDidUpdate() taps into updates.
Class components vs function components
The render() method is an essential part of both types of components in React. Class components have a separate render() method. In addition to normal class properties, the render() method is explicitly defined. It is usually positioned at the end of class components.
In class components, render() does not accept any parameters. Its only purpose is to return a JSX code that represents component’s appearance and functionality.
Functional components are a little different. They only have a return statement. However, changes to state or props still triggers the render method. In a way, functional components are render() methods themselves. They are run whenever state or props changes, and update virtual DOM.
Functional components do accept one argument – the props object, which is used to pass down data from parent components to their children.
There’s practically no difference between render() in class components and functional components. Both work the same way and follow the principles outlined above.