26
loading...
React JS - When Is Render Called
React has become one of the most popular JavaScript frameworks in the world. With an ever-growing team of developers, Facebook has been working hard at making it faster and more lightweight.
One of the most important features every developer should understand is the render method. You should understand how it's being called and when it's being called.
As a rule of thumb, we should remember all the events that can cause the re-rendering of the component.
In React JS, the render method is called:
forceUpdate function is calledA render is scheduled and called by React each time something important happens. React is very smart and only update component if it's it needed. Making sure the best performance is achieved.
The first important event is the mounting of components into a
DOM. This is considered to be the initial render of the component, and it happens only once. All the other additional renders are triggered by other events.We know that
state or props of the component are usually used to control what will be displayed in the component. It makes perfect sense to render the component each time one of them is changed.But in certain cases, props or a piece of state might not affect the render method. And rendering the component again is not needed. What will happen then?
By default, React will trigger
render method anyway. It's not optimal, but it's hard to know if a piece of state or props controls render method. Good thing is that React implements a way for developers to control this behavior. We'll look at this method in the final section of this article.The last thing that can trigger React render is
forceUpdate function. However, it is strongly discouraged to use this method, and only rely on props and state.The react render method is used to render React components. This technique is used where the webpage needs to be updated, such as when data changes or when the user clicks on a button.
The idea behind this technique is that all of the React component’s updates are done during the render process. When the component is being re-rendered, all the logic and calculations are evaluated. When everything is done, the component renders the output.
This means that we can avoid unnecessary calculations and DOM operations by only updating what we need to update, instead of processing every single one of our components each time we change something.
The answer to the following question is simple. We already agreed that React components render only if the data in the component changes. We also learned that it can't be any component data. It has to be the data used in the render block.
But in some scenarios, this information is not enough. And we need to debug our components to see what's happening. If we need to debug and track this behavior, we have a couple of options to use.
The easiest solution is to use
console.log inside of a render block and watch the console output inside the browser window.This solution is the quickest one, but it doesn't give us the ability to comfortably track renders. And it also needs to be set up for each component individually.
The other solution is to use React Developer Tools. This tool was created by the React team. And it's purpose is to quickly debug and inspect React components. It has a lot of interesting features, one of them being the ability to track rendering.
If you're not familiar with this tool, there is no reason to be worried. We wrote a quick tutorial that will get you up to speed in no time. You can read the full article here.
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders
If you want to use a solution that was specifically built for tracking renders. You can use a package called Why Did You Render. It has a simple setup and it starts tracking renders right away.
On top of that, this package will notify you about renders that can be avoided. So if you're trying to achieve better performance in your application. This package might just be the right match for you.
As we pointed out before, React will trigger
render method every time props or state changes. But on top of that, we can additionally customize this behavior, by implementing shouldComponentUpdate function.Use
shouldComponentUpdate to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.In the following example, we're implementing
shouldComponentUpdate function. In this case, the component will only re-render if value changes. We can make changes to unusedString as long as we want, but it won't trigger the rendering of the component.import React from "react";
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 0,
unusedString: "Hey there!",
};
}
shouldComponentUpdate(nextProps, nextState) {
// If the method returns true, component is rerendered
// If it return true, it is not rerenderd
return this.state.value != nextState.value;
}
render() {
return <div>{this.state.value}</div>;
}
}
export default Counter;React rendering is a concept that usually gets overlooked. We tend to think it just magically works and there is no way to control it.
After all, we are encouraged not to worry about renders. And only tracks the
state and props of the component.But if really want to see how our components are behaving, and how we can make them behave better. We need to examine their render process.
In this article, you learned everything there is to know about the render method in React JS. You learned when is the render method called. And all the events that can trigger the render method in React JS.
With all this information in mind, you can start optimizing the renders in your React application.
26