render() is a very important but often misunderstood method in React. In this guide, we’ll try to shed light on what render() is, what it does, and why it’s so important for the development process with React.
What is render in React?
Render method returns the component structure written in JSX. In other words, it defines what the user interface should look like. React components re-render whenever there’s a change to state or props to make sure the latest changes are reflected on the page.
Automatically updating (re-rendering) to display the latest changes is a key feature of React. It is what allows Facebook to display new notifications and comments without reloading the page.
Let’s take a closer look at what exactly render() method does. My blog SimpleFrontEnd also explores a number of specific use cases, like rendering when the user clicks a button.
How render() method works
You’ve probably noticed that in-class components, render() method returns HTML-like code to define component layout. Functional components do not have an explicit render() method, but functions themselves work the same.
Reacting to changes is very important in React. That’s why every component has a render() method. React calls render() method to update the component’s (and all of its children’s) layout to make sure it’s in line with the latest changes.
Next, let’s talk about what gets rendered. render() method renders a virtual DOM, not the actual DOM that we see in the browser. Virtual DOM is another very important feature in React. It’s essentially a lightweight copy of the real DOM, so React can efficiently render and re-render it to make sure the app stays up to date.
Once render() updates the virtual DOM, and React notices differences between the virtual DOM and the real DOM. The library automatically updates the HTML to reflect the latest changes. All of this happens automatically, without any input from developers.
Important: render() method runs every time there’s a change to state or props. Any side effects in the function body are going to run as well.
Conditional rendering in React
React is a JavaScript library, so you can use dynamic expressions to render (or not render) elements and components. You can also embed JavaScript expressions inside the component layout via JSX.
If/else statement allows you to conditionally customize the component’s layout.
As you can see in this CodeSandbox, the heading ‘Hello World’ renders because the condition is met.
Important: Most components return multiple components and/or elements. React has an important rule – components must always return one element, so don’t forget to wrap multiple elements with a div or a fragment.
React also allows us to embed ternary operators inside JSX. So we can conditionally render components right in the layout.
These are basic examples. In the real world, conditions usually come from the state, and values are likely to change in response to users’ actions.