Question

How to prevent re-renders in React?

Answer 1

Reason for re-renders in React:
Re-rendering of a component and it’s child components occur when props or state of the component has been changed.
Re-rendering components that are not updated, affects the performance of an application.

How to prevent re-rendering:
Consider the following components:

class Parent extends React.Component {
 state = { messageDisplayed: false };
 componentDidMount() {
   this.setState({ messageDisplayed: true });
 }

 render() {
   console.log("Parent is getting rendered");
   return (
     <div className="App">
       <Message />
     </div>
   );
 }
}

class Message extends React.Component {
 constructor(props) {
   super(props);
   this.state = { message: "Hello, this is vivek" };
 }  
 render() {
   console.log("Message is getting rendered");
   return (
     <div>
       <p>{this.state.message}</p>
     </<span style="-webkit-font-smoothing:subpixel-antialiased; border:0px; box-sizing:border-box; color:#007020; font-family:Helvetica,Arial,Sans-serif; font-size:15px; margin:0px; padding:0px; text-rendering:optimiz